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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券