1.onload(非IE)
iframe加载完成之后调用,所以常用来判断iframe加载完成。
2.onreadystatechange(IE)
此事件在iframe变化的时候都会触发,iframe加载过程至完成共触发3次
reayState有3种状态,分别是:loading –> interactiver –> complete.
4.window属性
每个iframe都有包裹它的window,而这个window是top window的子窗口.
// index.html <iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="300" height="300" id="login-iframe" class=""></iframe> <script type="text/javascript"> window.name = 'index'; </script> // login.html <script type="text/javascript"> if ($.cookie.get('loginCode')) { console.log(window.name,window); console.log(window.top.name,window.top); } else{ $.cookie.set('loginCode', '1', {expires: 1000* 60 * 60 * 2}); window.name='login'; setTimeout(function(){ window.name='loginrefresh'; location.reload(); },1000); console.log(window.name,window); console.log(window.top.name,window.top); } </script>
图如下:
分析:
内嵌iframe拥有window属性,内嵌iframe是top window的子窗口。iframe刷新后,其top属性不变。
3.name属性
作用:iframe的name属性配合a/form标签的target属性能实现页面局部刷新。
3.1.局部刷新
a标签点击后返回的页面显示到iframe里
// index.html <a href="http://www.ifeng.com/" target="_blank">打开新窗口</a> <a href="http://www.ifeng.com/" target="login-iframe">局部刷新</a> <iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" width="300" height="300" name="login-iframe" id="testEl"></iframe> // login.html <p>hello 我是嵌套login页面</p> <script type="text/javascript"> setInterval(function(){ console.log('我是嵌套login页面'); },1000); </script>
点击按钮【局部刷新】图如下:
分析:
iframe嵌套页面地址被替换成a标签的地址。所以控制台不再执行login.html里的输出。
form表单无刷新提交
<form target="login-iframe" method="get" action="http://search.ifeng.com/sofeng/search.action" target="_blank"> <input id="keyword" type="text" name="q" value=""> <input name="" type="submit" id="btnSearch1" class="btn01" value="提交"> </form> <iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" width="3000" height="300" name="login-iframe" id="testEl"></iframe>
图如下:
分析:form表单返回的页面在iframe中显示。
利用此可以实现表单无刷新提交。
跨域情况下:form表单提交到跨域接口,页面监听iframe的刷新来判断是否提交成功。但是跨域拿不到返回值。
3.2.iframe的name属性值即是iframe中window.name属性值
// index.html <iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="300" height="300" name="login-iframe" id="testEl"></iframe> <script type="text/javascript"> window.name = 'index'; setTimeout(function(){ document.getElementById('testEl').name = 'loginrefresh'; document.getElementById('testEl').contentWindow.location.reload(); },1000); </script> // login.html <script type="text/javascript"> console.log(window.name,'window'); console.log(window.top.name,window.top); </script>
图如下:
修改iframe name属性未触发window.name对象改变
// index.html <iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="300" height="300" name="login-iframe" id="testEl"></iframe> <script type="text/javascript"> window.name = 'index'; setTimeout(function(){ $('#testEl').remove(); var iframe = document.createElement('iframe'); iframe.name = 'loginrefresh'; iframe.src = 'http://test.demo.lkj.com/search/page/login'; document.body.append(iframe); },1000); </script> // login.html <script type="text/javascript"> console.log(window.name,'window'); console.log(window.top.name,window.top); </script>
图如下:
触发window对象改变