/**
* @author wushufeng
*
* 跨域的js通信,允许子页面再次嵌套iframe。利用了IE6/7的navigator对象是公用的hack。
* 注意:为了能兼容IE6/7,使用的时候需要保证:
* 1. 要通讯的iframe必须指定name属性;
* 2. 要通讯的iframe的name属性,必须唯一。
* usage:
*
* 父页面:
* 1.嵌入iframe,name=iframe1
* 2.new一个通讯对象:var aMsg = new XDMessage();
* 3.监听iframe1的信息
aMsg.listen(function(msg){
alert('父窗口得到:' + msg);
},'iframe1');
4.向iframe1发送信息:
aMsg.send("父窗口发送:" + new Date().toLocaleString(),'iframe1');
子页面:
1.new一个通讯对象:var aMsg = new XDMessage();
2.监听父页面的信息:
aMsg.listen(function(msg){
alert('子窗口得到:' + msg);
});
3.向父页面发送信息:
aMsg.send('我是iframe1' + new Date().toLocaleString());
[4].如果该页面也嵌套了iframe,name="iframe1_1",同样可以监听它的信息:
aMsg.listen(function(msg){
alert('子窗口得到:' + msg);
},'iframe1_1');
*/
function XDMessage(){
this.init();
}
XDMessage.prototype = {
support :'postMessage' in window,
prefix: "",
init: function(){
},
_listenOnce: false,
_onMessage: function(handler){
if(this._listenOnce){
return;
}
window.addEventListener ? window.addEventListener("message", handler, false) :window.attachEvent && window.attachEvent("onmessage", handler) ;
this._listenOnce = true;
},
listen: function(handler,targetName){
if(this.support){
this._onMessage(function(e){
handler(JSON.parse(e.data));
});
}else{
if(!targetName){
targetName = window.name + 'RecvFrom';
}else{
targetName += 'RecvTo';
}
navigator[targetName] = handler;
}
},
send: function(msg,targetName){
var win = parent;
if(targetName){
win = window.frames[targetName];
}
if(this.support){
win.postMessage(JSON.stringify(msg),'*');
}else{
if(!targetName){
targetName = window.name + 'RecvTo';
}else{
targetName += 'RecvFrom';
}
navigator[targetName] && navigator[targetName](msg);
}
}
};
分享到:
相关推荐
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
本文将详细讲解"PHP main与iframe相互通讯类 同域 跨域"这一主题,以及如何利用提供的文件实现这一功能。 首先,我们要理解同域和跨域的概念。同域是指两个或多个页面的源(协议+域名+端口)相同,它们之间可以自由...
`postMessage` API是实现这一功能的关键,为了解决传统`iframe`跨域限制的问题,提供了一种安全且灵活的方法。本文将深入探讨`iframe`跨域通信与`postMessage`的使用方法和应用场景。 首先,我们需要明白什么是跨域...
2. **父子页面间通信**:当两个页面成父子关系时(例如父页面通过iframe加载子页面),且这两个页面的源不同时产生的跨域问题。 #### 四、解决方案分析 ##### 4.1 不同源的接口请求 - **JSONP**:JSONP是一种广泛...
- 如果`iframe`加载的页面与父窗口不在同一域名下,就会出现跨域问题。为了允许通信,需要在`iframe`源页面设置`CORS`(Cross-Origin Resource Sharing)策略,允许特定的源进行通信。 5. **JavaScript变量共享**...
本知识点将详细讲解"PHP main 与 iframe 相互通讯类",以及如何通过给定的文件实现同域与跨域的通信。 首先,我们来看标题中的"main"和"iframe"。在Web开发中,"main"通常指的是主页面,而"iframe"是HTML中的一个...
跨域 Iframe 通信解决方案,兼容主流和 IE 系列浏览器。 ☏ Usage 父页面 // 初始化父页面的信使 var messenger = new Messenger('parent', 'MessengerProject'); // 绑定子页面 iframe messenger.addTarget(iframe1...
在多页面交互的场景下,`iframe`中的子页面与父页面以及与其他兄弟`iframe`之间的通信就显得尤为重要。本文将详细讲解如何实现`iframe`兄弟页面之间的相互调用。 首先,理解`iframe`的结构是关键。一个`iframe`元素...
本文实例讲述了JS实现iframe中子父页面跨域通讯的方法。分享给大家供大家参考,具体如下: 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他...
在这种场景下,`Iframe js 和 flex 通讯`成为一个关键的技术点。Iframe(内联框架)常用于在同一个页面中加载不同源的内容,而Flex是一种用于创建富互联网应用程序(RIA)的平台,它基于ActionScript和Flash。本篇...
对于更复杂的场景,如多级嵌套的Iframe,或跨域的Iframe,交互会变得稍微复杂。在Demo2中,父页面iframe1.html有两个Iframe(iframe2和iframe3)。父页面可以通过`getElementById`获取特定Iframe的引用,然后在其`...
4. **iframe通讯**:iframe内嵌页面作为一个独立的域,可以使用`window.postMessage`方法进行跨域通讯。postMessage提供了一种安全的消息传递方式,可以用来从一个iframe向另一个iframe发送消息。此外,父页面也可以...
Vue.js 是一款流行的前端框架,用于构建用户界面。...在实际开发过程中,为了保证安全性,记得检查消息的来源,防止跨域攻击。希望这篇文章对你在 Vue 与 iframe 信息交互上的理解和实践有所帮助。
`postMessage`允许一个窗口(例如,一个`<iframe>`、`window.open()`打开的新窗口或`pop-up`)向其他窗口发送数据,接收窗口可以通过监听`message`事件来接收这些数据。发送窗口通过`window.postMessage(data, ...
环境: 前端 vue ip地址:192.168.1.205 ...搜索问题,发现跨域,服务器响应的setCookie浏览器无法保存,而且就算保存了域名不同也不能携带。 第一步: 后台添加过滤器,因为前后端分离,不可能每个方