`
mutongwu
  • 浏览: 448692 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

跨域iframe通讯

阅读更多
/**
 * @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自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    php main 与 iframe 相互通讯类 同域 跨域)

    本文将详细讲解"PHP main与iframe相互通讯类 同域 跨域"这一主题,以及如何利用提供的文件实现这一功能。 首先,我们要理解同域和跨域的概念。同域是指两个或多个页面的源(协议+域名+端口)相同,它们之间可以自由...

    iframe跨域通信--html5.postmessage

    `postMessage` API是实现这一功能的关键,为了解决传统`iframe`跨域限制的问题,提供了一种安全且灵活的方法。本文将深入探讨`iframe`跨域通信与`postMessage`的使用方法和应用场景。 首先,我们需要明白什么是跨域...

    JavaScript 跨域通信方法

    2. **父子页面间通信**:当两个页面成父子关系时(例如父页面通过iframe加载子页面),且这两个页面的源不同时产生的跨域问题。 #### 四、解决方案分析 ##### 4.1 不同源的接口请求 - **JSONP**:JSONP是一种广泛...

    iframe和父窗口通讯实例

    - 如果`iframe`加载的页面与父窗口不在同一域名下,就会出现跨域问题。为了允许通信,需要在`iframe`源页面设置`CORS`(Cross-Origin Resource Sharing)策略,允许特定的源进行通信。 5. **JavaScript变量共享**...

    php main 与 iframe 相互通讯类

    本知识点将详细讲解"PHP main 与 iframe 相互通讯类",以及如何通过给定的文件实现同域与跨域的通信。 首先,我们来看标题中的"main"和"iframe"。在Web开发中,"main"通常指的是主页面,而"iframe"是HTML中的一个...

    messenger:一个常见的iframe通讯方案

    跨域 Iframe 通信解决方案,兼容主流和 IE 系列浏览器。 ☏ Usage 父页面 // 初始化父页面的信使 var messenger = new Messenger('parent', 'MessengerProject'); // 绑定子页面 iframe messenger.addTarget(iframe1...

    iframe兄弟页面相互调用

    在多页面交互的场景下,`iframe`中的子页面与父页面以及与其他兄弟`iframe`之间的通信就显得尤为重要。本文将详细讲解如何实现`iframe`兄弟页面之间的相互调用。 首先,理解`iframe`的结构是关键。一个`iframe`元素...

    JS实现iframe中子父页面跨域通讯的方法分析

    本文实例讲述了JS实现iframe中子父页面跨域通讯的方法。分享给大家供大家参考,具体如下: 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他...

    Iframe js 和 flex 通讯

    在这种场景下,`Iframe js 和 flex 通讯`成为一个关键的技术点。Iframe(内联框架)常用于在同一个页面中加载不同源的内容,而Flex是一种用于创建富互联网应用程序(RIA)的平台,它基于ActionScript和Flash。本篇...

    关于Iframe父页面与子页面之间的相互调用

    对于更复杂的场景,如多级嵌套的Iframe,或跨域的Iframe,交互会变得稍微复杂。在Demo2中,父页面iframe1.html有两个Iframe(iframe2和iframe3)。父页面可以通过`getElementById`获取特定Iframe的引用,然后在其`...

    10-网页多标签通讯.md

    4. **iframe通讯**:iframe内嵌页面作为一个独立的域,可以使用`window.postMessage`方法进行跨域通讯。postMessage提供了一种安全的消息传递方式,可以用来从一个iframe向另一个iframe发送消息。此外,父页面也可以...

    vue与iframe之间的信息交互的实现

    Vue.js 是一款流行的前端框架,用于构建用户界面。...在实际开发过程中,为了保证安全性,记得检查消息的来源,防止跨域攻击。希望这篇文章对你在 Vue 与 iframe 信息交互上的理解和实践有所帮助。

    html5跨域通讯之postMessage的用法总结

    `postMessage`允许一个窗口(例如,一个`<iframe>`、`window.open()`打开的新窗口或`pop-up`)向其他窗口发送数据,接收窗口可以通过监听`message`事件来接收这些数据。发送窗口通过`window.postMessage(data, ...

    解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 ...搜索问题,发现跨域,服务器响应的setCookie浏览器无法保存,而且就算保存了域名不同也不能携带。 第一步: 后台添加过滤器,因为前后端分离,不可能每个方

Global site tag (gtag.js) - Google Analytics