1、document.domain+iframe
www.a.com上的a.html
document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.a.com/b.html'; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; // 在这里操纵b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); };
script.a.com上的b.html
document.domain = 'a.com';
2、动态创建script
js.onload = js.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { // callback在此处执行 js.onload = js.onreadystatechange = null; } };
3、利用iframe和location.hash
先是a.com下的文件cs1.html文件:
function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo'; document.body.appendChild(ifr); } function checkHash() { try { var data = location.hash ? location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is '+data); } } catch(e) {}; } setInterval(checkHash, 2000);
cnblogs.com域名下的cs2.html:
//模拟一个简单的参数处理操作 switch(location.hash){ case '#paramdo': callBack(); break; case '#paramset': //do something…… break; } function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全机制无法修改parent.location.hash, // 所以要利用一个中间的cnblogs域下的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; // 注意该文件在"a.com"域下 document.body.appendChild(ifrproxy); } }
4、使用HTML5 postMessage
a.com/index.html中的代码:
<iframe id="ifr" src="b.com/index.html"></iframe> <script type="text/javascript"> window.onload = function() { var ifr = document.getElementById('ifr'); var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样 // 若写成'http://c.com'就不会执行postMessage了 ifr.contentWindow.postMessage('I was there!', targetOrigin); }; </script>
b.com/index.html中的代码:
<script type="text/javascript"> window.addEventListener('message', function(event){ // 通过origin属性判断消息来源地址 if (event.origin == 'http://a.com') { alert(event.data); // 弹出"I was there!" alert(event.source); // 对a.com、index.html中window对象的引用 // 但由于同源策略,这里event.source不可以访问window对象 } }, false); </script>
a.com下的域名cs3.html
//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1);
5、window.name实现的跨域数据传输
- 在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。
数据页面会把数据附加到这个iframe的window.name上,data.html代码如下:<script type="text/javascript"> window.name = 'I was there!'; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右 // 数据格式可以自定义,如json、字符串 </script>
- 在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下:
<script type="text/javascript"> var state = 0, iframe = document.createElement('iframe'), loadfn = function() { if (state === 1) { var data = iframe.contentWindow.name; // 读取数据 alert(data); //弹出'I was there!' } else if (state === 0) { state = 1; iframe.contentWindow.location = "http://a.com/proxy.html"; // 设置的代理文件 } }; iframe.src = 'http://b.com/data.html'; if (iframe.attachEvent) { iframe.attachEvent('onload', loadfn); } else { iframe.onload = loadfn; } document.body.appendChild(iframe); </script>
- 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
<script type="text/javascript"> iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); </script>
相关推荐
Javascript跨域访问解决方案 个人在网上搜集的资料,用于传输信息,不提倡下载
JavaScript跨域总结与解决办法
通过这个插件,可以实现不同域名的双向通信问题,内含demo 配套文章:http://blog.csdn.net/mycwq/article/details/16344171
NULL 博文链接:https://sun123start.iteye.com/blog/2150778
主要介绍了javascript跨域原因以及解决方案分享,十分的细致全面,有需要的小伙伴可以参考下。
主要介绍了javascript 跨域问题以及解决办法的相关资料,需要的朋友可以参考下
主程序无法获取到子程序页面的高度和宽度,所以出现双滚动条问题。通过引用两个js解决此方法。
javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域...
cors解决ajax跨域
借助ZiilaaBrowser浏览器插件,还解决Javascript跨域操作的问题。 验证码自动识别系统,采用模板匹配法来进行验证码的识别。具有强大的自我学习功能,会自动提示用户把未知的图形当成模板加入到模板库中。 ...
借助ZiilaaBrowser浏览器插件,还解决Javascript跨域操作的问题。 验证码自动识别系统,采用模板匹配法来进行验证码的识别。具有强大的自我学习功能,会自动提示用户把未知的图形当成模板加入到模板库中...
借助ZiilaaBrowser浏览器插件,还解决JavaScript跨域操作的问题。验证码自动识别系统,采用模板匹配法来进行验证码的识别。具有强大的自我学习功能,会自动提示用户把未知的图形当成模板加入到模板库中。安装极其...
借助ZiilaaBrowser浏览器插件,还解决JavaScript跨域操作的问题。 验证码自动识别系统,采用模板匹配法来进行验证码的识别。具有强大的自我学习功能,会自动提示用户把未知的图形当成模板加入到模板库中。 安装...
本篇文章主要介绍了JavaScript跨域,详细的总结了什么是跨域,并介绍了几种解决办法,感兴趣的小伙伴们可以参考一下。
要解决跨域的问题,我们可以使用以下几种方法: 一、通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性...
javascript 跨域访问 综合解决方案
浏览器出于安全考虑,是不允许JavaScript代码进行跨域操作。JavaScript 和 AJAX 跨域访问分为两大类,一是本域和子域的交互,二是本域和其他域的交互。 一、本域和子域的交互:www.s135.com 和 blog.s135.com ...
Ajax解决跨域之设置CORS响应头实现跨域案例详解 1.设置CORS响应头实现跨域 跨源资源共享(CORS) CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端...
由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢?