iframe巧妙跨域（如今已经不用了）

最新推荐文章于 2025-06-26 11:00:07 发布

原创最新推荐文章于 2025-06-26 11:00:07 发布 · 5.9k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了iframe作为网页嵌入工具的历史作用，如导航、在线编辑器和跨域通信等。然而，由于其页面加载阻塞问题和现代技术如ajax的兴起，iframe的跨域功能已逐渐被淘汰。文章讲解了如何通过JavaScript获取iframe内的window对象，以及利用window.name特性进行跨域数据传递的技巧，同时也指出这种方法在现代Web开发中已不常用。

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

iframe：

iframe是一个标签dom元素（<iframe src="" frameborder="0"></iframe>），内联框架

作用：可以一个网页里嵌入另一个网页（具有父子关系）

用法：导航栏tab切换页（古老的做法）、在线编辑器、广告植入，历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，跨域通信等

iframe的利弊：

iframe会阻塞页面加载，

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

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

解决跨域问题这个很牵强... 其实他已经不怎么用了(ajax的出现)

如何获取iframe内的window（然后在获取window下的数据）：

获取子窗口
1.document.getElementsByTagName('iframe')[0].contentWindow
2.document.getElementsById('id').contentWindow
简易写法
window.frames['iframe的name'] ==> 给iframe添加name属性（属性值为要获取的数据）

搞事的IE专用：
3.document.iframes[name].contentWindow
4.document.iframes[i].contentWindow

父子页面窗口的关系：

window.self
就是自己--->神经病的属性

window.parent
父级窗口对象

window.top
顶级窗口对象

window.name ：

window.name 特点页面重载刷新 name值不变即使换了一个页面依旧能访问到。

跨域都要受到同源策略的限制。但是通过windows.name 可以巧妙的实现跨域

在不同源的网址上设置window.name 然后在当前网页窗口加载到和目标同源的url，这样就能实现获取不同源的数据。

改变不同源网站的iframe的url，把url改成与想要访问数据网址同源的iframe的url，就能间接实现跨域吗。

下面代码实现要安装本地服务器。

<iframe src="../two/index.html" frameborder="1" width=500 height=500></iframe>
<script>
    var oIframe = document.getElementsByTagName('iframe')[0];
    //获取子窗口的window
    var iframe = oIframe.contentWindow;
    var flag = false;
    //之所以判断if是为了iframe的url改变时会刷新页面（一直刷新，我们只需要一次，锁住就行）
    oIframe.onload = function () {
        if (!flag) {
            flag = true;
            oIframe.src = './three.html';
        } else {
            console.log(iframe.name);
        }
    }
</script>