window.name 跨域

最新推荐文章于 2024-10-29 17:30:44 发布

最新推荐文章于 2024-10-29 17:30:44 发布 · 207 阅读

文章标签：

#JavaScript #Ajax #ViewUI

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一种使用window.name属性结合代理页面(proxy.html)来实现跨域数据传输的方法。该方法利用iframe加载不同源页面时name属性不变的特点，通过预设的代理页面绕过浏览器的同源策略限制，实现跨域数据的传递。此技术适用于需要进行简单数据交换的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.name跨域的基础是：iframe页面在其url改变的时候，不会改变name的数据，
从而通过proxy页面（与应用页面相同域名）的跳转，绕过跨域的限制。

[b]name传输的数据，大小一般为2M，IE和firefox下可以大至32M左右。[/b]


CrossDomain  = {
	// 设置的代理文件
	proxy: 'http://shawn.a.com:1234/proxy.html',

	/**
	*@param {String} url 接口
	*@param {Function} callback 回调函数，可选。
	*/
	getData: function(url,callback){
		var state = 0, 
		iframe = document.createElement('iframe');
		iframe.id = "CrossDomainIfrme";
		function loadfn() {
		    if (state === 1) {
                        // 读取数据
		        callback && callback(iframe.contentWindow.name);
		        destroy();
		    } else if (state === 0) {
		        state = 1;
		        iframe.contentWindow.location = CrossDomain.proxy;    
		    }  
		}
		function destroy(){
			iframe.contentWindow.document.write('');
		    iframe.contentWindow.close();
		    document.body.removeChild(iframe);
		}
		iframe.src = url;
		if (iframe.attachEvent) {
		    iframe.attachEvent('onload', loadfn);
		} else {
		    iframe.onload  = loadfn;
		}
		document.body.appendChild(iframe);
	}

}

[b]
proxy.html 只是一个空页面[/b]


<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8"></head><body></body></html>

[b]获取数据的接口，需要返回一个页面，例如：[/b]


<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8">
<script>
window.name = 'I set data!'; //这里把数据放到name里面
</script>
</head><body></body></html>