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。
有疑问可给此公众号发送信息。
欢迎转发！