Javascript中实现iframe跨域通信的例子

众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。而实际编码时我们会遇到使用iframe跨域访问、Ajax跨域通信等操作,这个时候如何突破跨域操作的问题,本文将结合实例讲述解决方案。

iframe不同子域通信

在同一主域不同子域如何进行Javascript调用?这个问题好解决,例如现有主域111cn.net和子域abc.111cn.net,在111cn.net有一个页面嵌入iframe的指向了abc.111cn.net下的某个页面,iframe页面需要访问111cn.net这个页面的js函数代码,那么解决办法是:在两个页面顶部加上document.domain信息,如:
 
<script type="text/javascript">
    document.domain = "111cn.net";
</script> 

这样一来,两个页面就变成同域,那么就可以像同域下正常进行javascript调用了。
iframe完全跨域通信
iframe跨域通信,可以通过url后面加参数并编码等获取不同域下返回的信息,关于该方法的应用大家可以网上搜索下相关知识。而本文我会给大家介绍HTML5的postMessage跨域通信功能,结合实例,以下是在主域111cn.net下的页面,我们在该页面上可以将消息发送到iframe不同域名m.111cn.net下的页面,注意是完全不同的域名,而在被iframe嵌入的m.111cn.net域下的页面可以接受到111cn.net发来的消息。
 
<div class="demo">
    <input type="text" id="message" value="Helloweba欢迎您!"> <button onclick="sendMessage()">向子窗口发数据</button>
    <div id="msg"></div>
    <br/>
    <iframe id="ifr" src="http://m.111cn.net/ demo/iframe.html"></iframe>
</div>

window.postMessage是一个安全的实现直接跨域通信的方法,被大多数现代浏览器支持。在接收信息iframe窗口,需要设置一个事件处理函数addEventListener来接收发过来的消息。
 
function sendMessage(){ 
     // 通过 postMessage 向子窗口发送数据
     document.getElementById("ifr").contentWindow.postMessage( 
         document.getElementById("message").value, 
        "http://m.111cn.net"
       ); 
   } 
   
window.addEventListener('message', function(e){
    if(e.source!=window.parent) return;
    document.getElementById("msg").innerHTML+=e.data;
}, false);

postMessage(data,origin)方法接受两个参数,data:要传递的数据,origin:字符串参数,指明目标窗口的源,如:http://m.111cn.net

出于安全性考虑,使用window.postMessage,必需要使用消息的origin和source属性来验证发送者的身份,否则会造成XSS漏洞。window.postMessage跨域功能非常强大,并且使用简单,效率高。

时间: 2025-01-31 05:52:00

Javascript中实现iframe跨域通信的例子的相关文章

iframe跨域通信封装详解_jquery

iframe跨域通信 查看演示        源码下载 众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容. 用法举例: 需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法. 1. 在top页面中建立方法供内部页面使用 复制代码 代码如下: func

对iframe跨域通信的封装

github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例: 需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法. 返回栏目页:http://www.bianceng.cnhttp://www.bi

通用Iframe跨域通信库实现

前言 前端在页面嵌入其他站点的页面时,常常会遇到跨域通信的问题,浏览器为了安全问题,限制了不同域名的JS直接调用. 解决方案 浏览器再限制跨域调用的同时,也预留了一个比较安全的通道.那就是message通道. 只要得到一个页面的window对象,都可以调用其postMessage的api,而不会有任何限制.而希望接受到其他页面message的页面只需要侦听这一消息即可.发送者代码示例 var parentWindow = window.parent; //假设这是一个放在iframe的页面,那么

js利用iframe实现跨域通信例子

为了方便演示跨域效果,先在 hosts 文件中加上以下内容: 127.0.0.1 www.myapp.com 127.0.0.1 sample.myapp.com 127.0.0.1 www.otherapp.com 下面我们就开始讨论如何使用iframe进行跨域通信,这里主要介绍以下几种方案: document.domain .URL.hash . Cross-fragment . Window.name . postMessage . document.domain 如果 A 源和 B 源具

javascript中IFrame跨域高度自适应实现代码

同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为"iframeid"的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现. 另外,请注意此解决方案仅供同域名下使用.  代码如下 复制代码     <script type="text/javascript">       function SetCwinHeight(){         var iframeid=documen

JavaScript使用HTML5的window.postMessage实现跨域通信例子

 这篇文章主要介绍了JavaScript使用HTML5的window.postMessage实现跨域通信例子,需要的朋友可以参考下 JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多:  1.document.domain+iframe的设置,应用于主域相同而子域不同:  2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限  3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SW

JavaScript使用HTML5的window.postMessage实现跨域通信例子_javascript技巧

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动

利用iframe实现ajax跨域通信的实现原理(图解)_AJAX相关

在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

常见的javascript跨域通信方法_javascript技巧

本文主要介绍几种常见的javascript跨域通信方法.首先讲解一下JSONP.1.JSONP JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他