iframe的实际应用

iframe就是一个标签dom元素, 我们可以使用向一个网页里嵌入另一个网页，以及用在导航栏tab切换页（古老的做法）、在线编辑器、广告植入，以及跨域通信等。

iframe利弊

利

解决跨域问题，其实这个很牵强...，因为其实他已经不怎么用了。

弊

触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。如果含有多个iframe,那么window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。通过JavaScript 动态设置 iframe 的 Src 可以避免这种阻塞情况

使用iframe

获取iframe内的window

注意不管是获取子iframe还是父iframe都受跨域限制

• 获取子窗口

  • document.getElementsByTagName('iframe')[0].contentWindow
  • document.getElementsById('id').contentWindow

• 简易写法

  • window.frames['iframe的name']

• IE专用

  • document.iframes[name].contentWindow
  • 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受跨域限制如何解决

• document.domain: 解决跨域限制最好的办法,而且域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法跨域。
• window.location.hash: 解决父页面向子页面传递数据问题(window.location.href)，不论是否跨域，都可以取得后面的hash值，即锚点后面的值，所以可使用锚点来传输数据，如下<iframe src='http://baidu.com#1'>,然后在子页面中使用定时器定时访问location.hash来获得传过来的值，如下图所示，注意里面lasthash的使用

• window.name: 解决父页面访问子页面的数据问题，window.name是放在整个窗口上，只要该浏览器窗口没有关闭，一个标签下，不管两个页面是否同源,以及是否刷星，window.name就可以取到，但是对于一个页面中镶嵌另外一个iframe，由于iframe是一个新的页面含有新的window，所以不能直接用window.name取得iframe中的window.name由于是不同的window,像下面这样使用window.name。

实现的思路是当子iframe加载完成后，我们替换掉iframe的src为当前页面的同源页面，这样我们就可以借助这个同源页面去iframe里面取window.name了