UNIQ | Life is only inevitable, there is no chance.
2019-08-09 | UNLOCK

iframe的实际应用

一 何为iframe

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

二 iframe的优点和缺点

优点

解决跨域问题（已经很少使用了）

缺点

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

三 iframe的使用

不管是获取子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事件
1
iframe(dom元素).onload = function () {}
  • ie下使用onreadystatechange或者设定计时器
1
2
3
4
5
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的使用

    1
    2
    3
    4
    5
    6
    7
    8
    var age=20
    var lastHash = window.location.hash;
    setInterval(function(0{
                          if(lastHash!=window.location.hash){
        console.log(location.hash.slice(1))
        lastHash=window.location.hash
    }
                          }),10)

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <iframe src='https://still-caverns-23465.herokuapp.com/ds.html' frameborder='0' name='ds'></iframe>
    <script>
    	var oIframe=document.getElementByTagName('iframe')[0]
        var oldAge=55
        var flag=true
        oIframe.onload=function(){
            if(flag){
                oIframe.src='./xl.html'
                flag=false
            }else {
                console.log(oIframe.contentWindow.name)
            }
        }
    </script>

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

iframe

评论加载中