iframe内联框架之巧妙跨域

最新推荐文章于 2023-01-06 22:53:52 发布

weixin_34137799

最新推荐文章于 2023-01-06 22:53:52 发布

阅读量406

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d05f1326fb9a07ee9586ec9

本文详细介绍了HTML中的iframe标签，包括其作用、使用场景、跨域通信方式及存在的弊端。探讨了iframe在页面加载、历史记录管理、跨域通信等方面的应用，并深入讲解了如何在不同环境下判断iframe加载完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者 zhangl

iframe是什么

iframe就是一个html标签dom元素

作用

可以将一个网页嵌入另一个网页
- 导航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中不安全
- 大小受到限制

转载于:https://juejin.im/post/5d05f1326fb9a07ee9586ec9