网络 -- iframe 内联框架之巧妙跨域

如何获取 iframe 内的 window ？

  • 获取子窗口

  1. document.getElementsByTagName('iframe')[0].contentWindow

  2. document.getElementsById('id').contentWindow

  • 简易写法

window.frames['iframe 的 name']

  • IE 专用

  1. document.iframes[name].contentWindow

  2. document.iframes[i].contentWindow

父子页面窗口的关系

  • window.self：自己

  • window.parent：父级窗口属性

  • window.top：顶级窗口属性

父子窗口通信

  • 父访问子（等待子 iframe 加载完成后可以通过 iframe.contentWindow 变量 访问也会涉及跨域问题）。

  • 子访问父涉及跨域问题。

判断 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");
    }
    }

iframe 概念

  • iframe 就是一个标签 dom 元素

  • 可以一个网页里嵌入另一个页面

导航栏 tab 切换页（古老做法）、在线编辑器、广告植入

  • 历史记录管理，解决 ajax 化网站响应浏览器前进后退按钮的方案

  • 跨域通信等

http://www.w3school.com.cn/tiy/Lasp?f=html_a

iframe 利弊

  • iframe 阻塞页面加载

  • 触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的“忙”指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。

  • window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况。

iframe 受跨域限制如何解决

  1. document.domain 解决跨域限制最好的办法

  2. window.location.hash 解决子页面访问父页面数据问题（window.location.href）

  3. window.name 解决父页面访问子页面的数据问题

  4. H5 PostMessage

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容