专栏首页Node.js开发iframe实现页面局部刷新原理解析

iframe实现页面局部刷新原理解析

web开发实现页面的局部刷新的技术,除了比较常见的ajax,还有通过iframe来实现,这种方式和ajax有什么不同呢?

首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。

情况1.不输入用户名,登陆失败。

情况2.输入用户名,密码正确,登陆成功。

上面的效果实现起来很简单,无非就是给按钮绑定点击事件,事件里发送一个ajax请求,请求完成后,回调函数根据返回结果,再操作dom元素。

那同样的表单登陆,用iframe如何实现呢?

先看前端页面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="text/javascript">
    /*
    隐藏帧实现局部更新
    实际上iframe就相当于页面的子页面
    */
    </script>
</head>
<body>
    <div>
        <form action="./iframe.php" method="post" target="myframe">
            用户名:<input type="text" name="username"><span id="info"></span><br>
            密码:<input type="text" name="password">
            <input type="submit" value="登录">
        </form>
    </div>
    <iframe width="0" height="0"  frameborder="0" name="myframe"></iframe>
</body>
</html>

页面中首先是一个表单,这个表单与以往表单不同的是,form多了一个target属性,属性值为“myframe”。

在表单的下面有一个iframe元素,这个iframe元素上有个name属性,属性值也为“myframe”。

解释一下target属性的作用,w3school上的介绍:target 属性规定在何处打开 action URL

如果表单元素没有target这个属性,表单提交后,当前页面会发生跳转;如果有了target属性,页面就不会发生跳转,这种情况下服务端返回的东西输出到哪里呢?

这里就需要用一个iframe来接受服务端返回的数据,并且iframe的name属性必须和表单form的target的属性相同。target指向了一个iframe元素,在iframe中打开action的url。

利用iframe方式,返回的数据与ajax返回的数据是不同的。来看一下iframe返回的后端php代码:

<?php 
$uname = $_POST['username'];
$pw = $_POST['password'];

if($uname == 'admin' && $pw == '123'){
?>
    <script type="text/javascript">
        parent.document.getElementById('info').innerHTML = '登录成功';
    </script>
<?php }else{ ?>
    <script type="text/javascript">
        parent.document.getElementById('info').innerHTML = '登录失败';
    </script>
<?php } ?>

php代码的解释:接受前端发送的数据,之后根据接受到的结果,输出不同的值。

咱们来看看输出的什么值:

<script type="text/javascript">
        parent.document.getElementById('info').innerHTML = '登录成功';
    </script>

以上代码有些人会判断是js,说是js是不准确的。这段代码用javascript标签包裹,所以是一段html代码,而js代码中有一个parent.document。通过这段代码可以获取到当前页面中的dom元素,并对其进行操作,看操作结果:

情况1.账号密码正确时,登陆成功。

情况2,账号或密码不正确时,登陆失败。

同样实现了页面的局部刷新,而且用的不是ajax技术。

原理是将表单提交后跳转的页面,指向本页的iframe标签中,iframe刷新后,返回的是后端输出的javascript标签包裹的js代码,而返回的javascript代码可以直接运行,并且可以操作父页面中的元素。

封装原生ajax还得考虑兼容,iframe就不用考虑兼容性的问题,但ajax对比iframe会更加简洁明了。在ajax没有普及之前,web开发的局部刷新用的都是iframe。

有疑问可给此公众号发送信息。

欢迎转发!

本文分享自微信公众号 - nodejs全栈开发(geekclass),作者:陈友谅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-11-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序页面跳转方法总结

    在开发小程序的时候,会碰到页面间进行跳转的需求,小程序间页面跳转的方法有很多,大体分为两类,一个是指令方式,一个是用过js控制。

    挥刀北上
  • 面试题目之原生实现call、apply、bind

    去年写了篇文章,call、apply和bind的区别,但是随着市场对前端工程师的要求越来越高,我们也要与时俱进,需要深入的了解一下这三个方法的原理。

    挥刀北上
  • koa与express的中间件机制揭秘

    TJ大神开发完express和koa后毅然决然的离开了nodejs转向了go,但这两个web开发框架依然是用nodejs做web开发应用最多的。

    挥刀北上
  • Spark Streaming基于网络的词频统计

    ZHANGHAO
  • 使用神经网络预测股价:失败了!!!

    当我们说起金融时间序列的预测,大家可能第一个想到的是预测股票价格。 然而,Chollet 的《Deep Learning with Python》一书强调,人们...

    量化投资与机器学习微信公众号
  • jvm 性能调优工具之 jcmd

    java404
  • Confluence 6 配置快速导航 原

    当在 Confluence 中的快速导航进行查找的时候(请查看 Searching Confluence)能够帮助你显示页面下拉列表和其他的项目,这个是通过查找...

    HoneyMoose
  • 实战 | 用aiohttp和uvloop实现一个高性能爬虫

    asyncio于Python3.4引入标准库,增加了对异步I/O的支持,asyncio基于事件循环,可以轻松实现异步I/O操作。接下来,我们用基于asyncio...

    simpleapples
  • Google代码管理工具101 部分5-表单

    主编前言: 很多朋友都听说过Tag Management(监测代码管理),但其强大的功能和实现方式,了解的朋友不多。本系列以Google Tag Manager...

    iCDO互联网数据官
  • 附003.Docker Compose命令详解

    -f参数为可选,也可使用-f提供多个配置文件,当使用多个文件时,Compose会将它们合并为一个配置。Compose按照提供文件的顺序构建配置。后续文件覆盖并添...

    木二

扫码关注云+社区

领取腾讯云代金券