内容来源
怿飞的BLOG
比较适合获取跨域的HTML片段,获取JSON可以用SCRIPT标签解决.
用自己的话描述一下实现跨域的过程:
在A域名下的某个网页下需要向另一个域名B(子域或不同域名)发起请求获取数据,首先创建一个IFRAME(SRC直接填写为要请求的URL)来载入跨域页面,同时监听该IFRAME的onload事件.IFRMAE载入的B域名页面通过JS把数据赋予window.name,完成赋值后通过更改自身的location跳转到A域名下的一个空白页面,此空白页面载入完成后,触发此次请求的回调并移除IFRAME,因为此时IFRAME和主页面同域(都是A域),所以可以获取到IFRAME的window.name中的数据.
下面的代码摘自原文:
window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)
A域以下面的代码来发起请求和实现回调
(function(){
var YUD = YAHOO.util.Dom, YUE = YAHOO.util.Event;
dataRequest = {
_doc: document,
cfg: {
proxyUrl: 'proxy.html'
}
};
dataRequest.send = function(sUrl, fnCallBack){
if(!sUrl || typeof sUrl !== 'string'){
return;
}
sUrl += (sUrl.indexOf('?') > 0 ? '&' : '?') + 'windowname=true';
var frame = this._doc.createElement('iframe'), state = 0, self = this;
this._doc.body.appendChild(frame);
frame.style.display = 'none';
var clear = function(){
try{
frame.contentWindow.document.write('');
frame.contentWindow.close();
self._doc.body.removeChild(frame);
}catch(e){}
};
var getData = function(){
try{
var da = frame.contentWindow.name;
}catch(e){}
clear();
if(fnCallBack && typeof fnCallBack === 'function'){
fnCallBack(da);
}
};
YUE.on(frame, 'load', function(){
if(state === 1){
getData();
} else if(state === 0){
state = 1;
frame.contentWindow.location = self.cfg.proxyUrl;
}
});
frame.src = sUrl;
};
})();
B域下的页面以这种形式绑定数据到window.name
<html>
<body>
<p id="content">
some <strong>html/xml-style</strong>data
</p>
</body>
<script type="text/javascript">
window.name = document.getElementById("content").innerHTML;
</script>
</html>
另外一个跨域的解决方案比较复杂,能实现同域下的子域与子域或者子域与父域的通信,但要求主页面必须是主域
查看DEMO
分享到:
相关推荐
window.name解决跨域问题的文档,刚才网上发现的.也许有点作用
后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ,并引入到了 Dojo (dojox.io.windowName),用来解决跨域数据传输问题。window.name 传输技术的基本原理和步骤为: name 在浏览器环境中是一个全局/window...
本Demo实现了一个来自不同服务器的前端页面集成方案,页面间通过window窗口关系形成父子页面关系,跨域情况下父子页面间彼此看不见对方的DOM和js对象,无法直接进行数据交互。本方案从父页面到子页面数据传递采用url...
原文:http://research.microsoft.com/~helenw/papers/subspace.pdfwindow.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法...
NULL 博文链接:https://yiminghe.iteye.com/blog/346796
本文给大家介绍window.name实现的跨域数据传输,自己亲自实践了一下,真的非常好用,特此分享到脚本之家网站供大家参考
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
技术上,nameStorage 使用 window.name 存储数据。数据的生存周期为窗口会话的生存周期,同一个窗口可以通过 nameStorage 共享数据。出生证明window.name 非常有用,但不可滥用。为了规范、简单便利、安全的使用 ...
三、使用window.name来进行跨域 window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name...
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。... window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。 各种方案
本文实例讲述了PHP下ajax跨域的解决方案之window.name。分享给大家供大家参考,具体如下: 原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持...
技术上,nameStorage 使用 window.name 存储数据。 数据的生存周期为窗口会话的生存周期,同一个窗口可以通过 nameStorage 共享数据。 出生证明 window.name 非常有用,但不可滥用。 为了规范、简单便利、安全的使用...
分享转载:前端常见跨域解决方案 1、 通过jsonp跨域 ...4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
解决方式: 一、window.name 1、 服务器返回 代码如下: [removed]window.name='{“id”:”3″, “name”:”leisure”}’;[removed] 2、定义一个iframe,添加onload事件 <iframe id=”iframe1″ onload=”iLoad”...
<asp:ScriptReference Name="MicrosoftAjax.js" ScriptMode="auto" Path="~/ScriptLibrary/System.Web.Extensions/1.0.61025.0/MicrosoftAjax.js" /> 2、修改MicrosoftAjax.debug.js 删除 switch(Sys.Browser...
跨域demo集一个关于跨域的简单demo集合,适合入门学习跨域的。任何对初学者学习跨域有用的PR都会接受,谢谢!原理用node的web框架express在3000端口和3001端口分别开启一个静态服务器,在两个端口间进行跨域传输数据...