内容简介:触发origin页面点击事件,查看target页面的执行结果这里需要借助一个临时页面充当两个跨域页面的桥梁
- 可以将一个网页嵌入另一个网页
- 导航tab栏、在线编辑、广告植入等
- 历史记录管理,解决ajax导致的网站响应浏览器前进后退的方案
- 跨域通信等
iframe弊端
- 阻塞页面加载
获取iframe内的window
获取子窗口
- document.getElementsByTagName('iframe')[0].contentWindow
- document.getElementById('id')[0].contentWindow
- window.frames['iframe的name']
获取父窗口
- window.parent
IE专用
- document.iframes[name].contentWindow
- document.iframes[i].contentWindow
取值
父取子
<!--父--> <iframe src="./children.html" frameborder="1"></iframe> <!--获取子变量--> <script> var cIframe = document.getElementsByTagName('iframe')[0]; cIframe.onload = function () { console.log(cIframe.contentWindow.childrenAge); }; </script> 复制代码
<!--子--> <!--定义变量--> <script> var childrenAge = 20; </script> 复制代码
子取父
<!--父--> <iframe src="./children.html" frameborder="1"></iframe> <!--定义变量--> <script> var fatherAge = 50; </script> 复制代码
<!--子--> <!--获取变量--> <script> var fIframe = window.parent; console.log(fIframe.fatherAge); </script> 复制代码
父子页面窗口的关系
- window.self -- 自己
- window.parent -- 父级窗口对象
- window.top -- 顶级窗口对象
判断iframe加载完成
非IE下使用onload
iframe(dom元素).onload = function () {} 复制代码
IE下使用onreadystatechange
iframe.onreadystatechange = function () { if (iframe.readyState === 'complete' || iframe.readyState === 'loaded') { alert('Local iframe is now loaded'); } } 复制代码
父子窗口跨域通信
hash
<!--origin http协议--> <iframe src="./iframe2.html" frameborder="1"></iframe> <script> var oIframe = document.getElementsByTagName('iframe')[0]; var oIframeSrc = oIframe.src; var age = 55; document.onclick = function () { oIframe.src = oIframeSrc + '#' + age; age++; }; </script> 复制代码
<!--target file协议--> <div>iframe2222</div> <script> var lct = window.location; var preHash = lct.hash; setInterval(function () { if (preHash !== lct.hash) { console.log(lct.hash); preHash = lct.hash; } }, 300); </script> 复制代码
触发origin页面点击事件,查看target页面的执行结果
- 缺点:
- target页需要使用计时器不断查看hash值变化, 性能消耗大
- origin页面不能获取到target页面的数据
- 数据放入hash中不安全
- 大小受到限制
window.name
这里需要借助一个临时页面充当两个跨域页面的桥梁
<!--target http协议--> <iframe src="./iframe2.html" frameborder="1"></iframe> <script> var oIframe = document.getElementsByTagName('iframe')[0]; var flag = true; oIframe.onload = function () { if (flag) { oIframe.src = './temp.html'; flag = false; } else { console.log(oIframe.contentWindow.name); } }; </script> 复制代码
<!--tmep--> 空 复制代码
<!--orgin file协议--> <div>iframe2222</div> <script> window.name = 20; </script> 复制代码
- 缺点:
- 数据放入hash中不安全
- 大小受到限制
以上所述就是小编给大家介绍的《iframe内联框架之巧妙跨域》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 提升go编译器内联程度
- 智能合约基础语言(十):Solidity内联汇编
- 重学前端:块级元素与内联元素
- 内联第三方依赖到自己的包中
- [译] Go语言inline内联的策略与限制
- [译] Go 语言 inline 内联的策略与限制
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JS 压缩/解压工具
在线压缩/解压 JS 代码
图片转BASE64编码
在线图片转Base64编码工具