iframe的实际应用

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

`iframe`利弊

利

解决跨域问题，其实这个很牵强...，由于其实他已经不怎么用了。浏览器

弊

触发 window 的 onload 事件是很是重要的。onload 事件触发使浏览器的 “忙” 指示器中止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感受就是这个网页很是慢。若是含有多个iframe,那么window 的 onload 事件须要在全部 iframe 加载完毕后(包含里面的元素)才会触发。经过JavaScript 动态设置 iframe 的 Src 能够避免这种阻塞状况dom

使用`iframe`

获取`iframe`内的`window`

注意无论是获取子iframe仍是父iframe都受跨域限制编辑器

获取子窗口spa
- document.getElementsByTagName('iframe')[0].contentWindow
- document.getElementsById('id').contentWindow
简易写法3d
- window.frames['iframe的name']
IE专用code
- 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.");
     } 
 }

父访问子和子访问父涉都会及跨域问题blog

`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了事件

iframe利弊

利

弊

使用iframe

获取iframe内的window