iframe间的跨域通信(添加onmessage 或message事件)

最新推荐文章于 2025-09-08 10:51:01 发布
原创 最新推荐文章于 2025-09-08 10:51:01 发布 · 3.9k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #json #ViewUI

本文介绍了跨域问题及其解决方法，重点讲解了HTML5提供的window.postMessage()方法如何实现不同域名间的安全通信，并给出了示例代码。

1，跨域的一个示例

当你需要操作一个内嵌iframe是，如果这个内嵌iframe和打开的网站不在同一个域中，你时常会遇到这样的报错：

 

Unsafe JavaScript attempt to access frame with URL http:/www.d1.com from frame with URL http://www.d2.com. Domains, protocols and ports must match.

 

从报错信息中我们可以知道，浏览器是通过域名(domain)，协议(HTTP)，端口(Port)。也就是说这三点只要有一个不匹配那就是跨域(Cross domain)。

 

对于跨域，我们通常的解决办法是在原来的域添加一个文件，用该文件作为中间人来实现跨域。也就是说，先发消息到该文件，由该文件再操作同域的HTML。

 

HTML 5给我们带来了安全的跨域通信接口，即window.postMessage()方法。它方法原型是：

 

window.postMessage(msg, domain);

 

我们可以给指定的domain发送msg。而接收msg的iframe只要注册一个监听事件就可以了。我们看示例：

 

www.d1.com/a.html

 

 

<html>

<head>

    <title>operate the iframe on other domain</title>

    <script>

        function sendMessage(){

            var frm = document.getElementByIdx_x_x("iframe1");

            frm.contentWindow.postMessage("hello","*")

        }

    </script>

</head>

<body>

    <input id="send" type="button" onclick="sendMessage()" value="send message" />

    <br />

    <iframe style="width:300px; height:400px;" id="iframe1" src="http://www.d2.com/b.html">

    </iframe>

</body>

</html>

我们再看看监听的那个iframe

 

www.d2.com/b.html

 

 

<html>

<head>

    <title>a frame which receive the message</title>

    <script>

        var OnMessage = function (e) {

            alert(e.data);

        }

        function init() {

            if (window.addEventListener) {  // all browsers except IE before version 9

                window.addEventListener("message", OnMessage, false);

            } else {

                if (window.attachEvent) {   // IE before version 9

                window.attachEvent("onmessage", OnMessage);

                }

            }

            };

            init();

    </script>

</head>

<body>

    <p>a iframe to receive the message</p>

</body>

</html>

在监听处理函数中我们可以判断具体的那个domain发来的消息。

 

2，浏览器支持

IE8+, FF3+, Chrome, Safari

 

IE8中需要注意的是msg这个参数只能是string，而其他浏览器支持JavaScript的object。变通办法就是发送一个在发送时JSON.stringfy格式化一下，而在接受端JSON.parse就可以了。

 

如果有向后兼容的需要，可以考虑这个Hack:Backwards compatible window.postMessage() window.postMessage()

 

Update:2012-08-30

 

前些日子我发现Tecent的一个Team的Blog的一篇文章，利用”about:blank”很好地解决的IE6和IE7下的iframe跨域问题，具体请猛击：iframe跨域通信的通用解决方案

 

3，注意事项

如果你在接受消息的iframe中通过JavaScript来修改DOM元素。要确保iframe已经加载完成，可以这样做：

 

 

_overlay = document.getElementByIdx_x_x("iframe1");

if(_overlay.attachEvent){

    _overlay.attachEvent("onreadystatechange", function(){

       if(_overlay.readyState === "complete" || _overlay.readyState == "loaded"){

             _overlay.detachEvent( "onreadystatechange", arguments.callee);

            sendMessage();

       }

    });

} else {

    if(_overlay.addEventListener){

        _overlay.addEventListener( "load", function(){

             this.removeEventListener( "load", arguments.call, false);

             sendMessage();

        }, false);

    }

}

 

 

参考： 

---------------------------------------------------------------------------------------

 

http://blog.css-js.com/javascript/javascript-iframe-readystate.html

 

http://msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx

 

https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

 

http://www.alloyteam.com/2012/08/lightweight-solution-for-an-iframe-cross-domain-communication/

 
iteye_16362
关注
使用 postMessage + iframe 实现跨域通信
每天都要努力学习哦~~
06-12 1296
一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。时事件被多次触发，而使用。
跨域 iframe 实例 （Cross-Domain Javascript execution library）
03-31
NULL 博文链接：https://justcoding.iteye.com/blog/1374728
iframe跨域
weixin_33918114的博客
12-28 235
前面的话 　　script、image、iframe的src都不受同源策略的影响。所以可以借助这一特点，实现跨域。例如，前面介绍的jsonp是使用script标签，imgPing是使用image标签，而本文将介绍使用iframe标签实现跨域   引入 　　1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A 网页设置的 Cooki...
iframe跨域问题解决方案详解
最新发布
weixin_28793831的博客
09-08 2072
同源策略（Same-Origin Policy）是浏览器的核心安全机制之一，用于防止不同来源的网页之间进行非法的资源访问和数据交互。所谓“同源”，指的是协议（http/https）、域名（或IP）、端口三者完全一致。若其中任意一项不同，即被视为跨域（Cross-Origin）。跨域问题通常出现在前后端分离、微前端架构、嵌套iframe、第三方服务调用等场景中。例如，前端运行在，而后端接口位于，此时发起的请求将受到浏览器的跨域限制。
使用 <Iframe>实现跨域通信
https://www.cnblogs.com/hezemin/ 已经放弃优快云了，请转移博客园！请转移博客园！请转移博客园！
10-28 3672
使用 <Iframe>实现跨域通信
iframe跨域解决方案
weixin_34226706的博客
04-20 181
　　　　公司某个功能用的是iframe，由于跨域的原因，我们不能直接设置父级页面iframe的高度，所以用了一个中间页home来完成父级页面iframe的高度设置，这种中间页其实很多时候不好用，因为涉及到页面跳转和刷新，每次都得刷一下页面，而消息发送成功页的一个定位到顶部的功能，就是由于页面刷了一次导致体验不好，除了体验，这种中间页跳转的做法也很蹩脚和繁...
iframe跨域通信封装详解
09-03
**iframe跨域通信封装详解** 在前端开发中，由于浏览器的安全策略，JavaScript默认情况下不允许跨域访问资源。这意味着，一个页面中的脚本只能操作属于同一源（协议+域名+端口）的页面元素。然而，当需要在一个页面...
iframe 跨域解决方法
04-10
在Web开发中，`iframe` 是一个非常常用的元素，它允许我们在一个页面中...理解并正确使用上述方法，可以有效地解决跨域限制，实现`iframe`间的通信。在实际项目中，务必确保遵循最佳实践，同时注意安全性和性能影响。
HTML5 window/iframe跨域传递消息 API介绍
09-28
HTML5的`window.postMessage` API 是一种允许不同源的窗口或`iframe`之间安全地进行跨域通信的技术。这一功能的引入解决了之前由于同源策略限制导致的跨域数据交换问题，无需服务器端的额外配合。 `window.post...
iframe跨域通信
时光清浅处，一步一安然
08-15 442
假设A和B两个页面，处于两个不同的域中，现在在A页面中，通过iframe方式引入了B页面，那么B页面中的参数如何传递给A页面呢？A页面中又如何获取B页面传递过来的数据呢？ A页面内容 <iframe id="iframe-a" width="100px" height="100px" src="B页面地址，可以带参数" frameborder="0" sandbox="allow-modals allow-forms allow-scripts allow-same-origin all
cross-domain:通过三层Iframe嵌套实现JS跨域访问
06-11
使用在iframe中内嵌一个动态生成的指向与父页面同域的iframe实现跨域 文件列表 A域（父页面）中的文件 cross_domain_transfer.html 实现跨域的关键文件，B域要指向的目标跨域跳转页面URL ； Parent.html A域示例页面，内嵌iframe指向B域 。 B域（子页面）中的文件 crossdomain.js 实现跨域的关键文件，用于动态生成跳转的iframe； var crossDomain = new CrossDomain('<A>/cross_domain_transfer.html'); //初始化跨域类，传入目标域的跨域跳转页面URL crossDomain.visit(' parent.somefunction(args...)'); iframe.html B域示例页面，嵌入到A域Parent.html的iframe中
iframe跨域问题
weixin_39294436的博客
01-18 995
iframe 跨域
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值