注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

江志祥的博客

可恶的中国银行,信用卡像病毒啊,取消那么难,,,

 
 
 

日志

 
 

JS 使用window.name跨域实践  

2014-03-23 19:33:22|  分类: 计算机_javascrip |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

看了园友的 window.name实现的跨域数据传输

自己实践了一下,真的很好用。

特将具体实现方法记录如下:

如a.com网站想通过JS获取b.com网站的数据。

1 在a.com网站添加一个空HTML页。名称为:http://a.com/null.html

2 在a.com网站需要获取数据页面(如:http://a.com/getDomainData.html)内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>跨域获取数据</title>
    <script type="text/javascript">
    function domainData(url, fn)
    {
		var isFirst = true;
		var iframe = document.createElement('iframe');
		iframe.style.display = 'none';
		var loadfn = function(){
			if(isFirst){
				iframe.contentWindow.location = 'http://a.com/null.html';
				isFirst = false;
			} else {
				fn(iframe.contentWindow.name);
				iframe.contentWindow.document.write('');
				iframe.contentWindow.close();
				document.body.removeChild(iframe);
				iframe.src = '';
				iframe = null;
			}
		};
		iframe.src = url;
		if(iframe.attachEvent){
			iframe.attachEvent('onload', loadfn);
		} else {
			iframe.onload = loadfn;
		}
	    
		document.body.appendChild(iframe);
    }
    </script>
</head>
<body>

</body>
    <script type="text/javascript">
    domainData('http://b.com/data.html', function(data){
		alert(data);
    });
    </script>
</html>

3 在b.com中添加获取数据页面 如:http://b.com/data.html 内容需包含:

 

<script>
  window.name = '需要跨域传递的数据';
</script>

4 访问 http://a.com/getDomainData.html 就可返回 http://b.com/data.html 中的window.name中的数据了。

需要注意的地方

null.html 是必须的。内容可为空。

 iframe的onload事件绑定 必须这样写:

if(iframe.attachEvent){
	 iframe.attachEvent('onload', loadfn);
} else {
	 iframe.onload = loadfn;
}

调用domainData函数必须在body后面,或页面加载完后。

调用时会执行 http://b.com/data.html 页面的脚本。

  评论这张
 
阅读(18)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017