前端跨域解决方法之window.name+iframe

最新推荐文章于 2023-11-11 14:19:29 发布

ghostlpx

最新推荐文章于 2023-11-11 14:19:29 发布

阅读量7.1k

点赞数

分类专栏：技术分享文章标签： javascript 跨域

本文链接：https://blog.csdn.net/ghostlpx/article/details/52211922

版权

技术分享专栏收录该内容

22 篇文章 0 订阅

订阅专栏

window.name 传输技术，原本是 Thomas Frank 用于解决 cookie 的一些劣势（每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等）而发明的（详细见原文：《Session variables without cookies》），后来 Kris Zyp 在此方法的基础上强化了 window.name 传输，并引入到了 Dojo （dojox.io.windowName），用来解决跨域数据传输问题。

首先，我们要知道关于window.name的这样一个特性：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。换句话说，name属性不会因为页面的url变化而变化，这就给跨域提供了机会。

我们可以在源页面中利用iframe标签嵌套要请求的目标页面，在目标页面设置window.name属性，即把要请求的信息赋给window.name。但是问题来了，两个页面处于不同域，源页面并不能获得目标页面的name值，因为name值只对位于同一域中的页面是可见的。此时，我们需要将iframe导航回与源页面处于同一域中air.html页面（即一个空页面，在这里充当一个中转的角色），上面说了这时候的name值依旧保持不变，那么我们就可以获取到它了。

示例代码：

http://www.a.com/origin.html如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		function getData ( url, fn ) {
			var oIframe = document.createElement('iframe'),
				firstBtn = true,
				loadFn = function () {
					if ( firstBtn ) {
						//导航回同一域下的air.html，以便获取到name值
						oIframe.contentWindow.location = 'http://www.a.com/air.html';
						firstBtn = false;
					} else {
						fn( oIframe.contentWindow.name );
						oIframe.contentWindow.document.write('');
						oIframe.contentWindow.close();
						document.body.removeChild(oIframe);
						oIframe.src = '';
						oIframe = null;
					}
				};

			oIframe.src = url;

			//1.第一次iframe加载完毕触发事件，执行loadFn函数，会将iframe导航回air.html
			//2.air.html加载完毕后又会触发事件，再次执行loadFn函数，此时会走else
			if ( oIframe.attachEvent ) {
				oIframe.attachEvent( 'onload', loadFn );
			} else {
				oIframe.onload = loadFn;
			}

			document.body.appendChild(oIframe);
		}


		//页面加载完毕后调用getData函数去获取数据
		window.onload = function () {
			getData( 'http://www.b.com/target.html', function ( data ) {
				console.log( data );
			} );
		}
	</script>
</head>
<body>
</body>
</html>

http://www.b.com/target.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		window.name = '想要获取的信息';
	</script>
</body>
</html>

参考文章：使用 window.name 解决跨域问题

ghostlpx

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端跨域解决方法之window.name+iframe

window.name 传输技术，原本是 Thomas Frank 用于解决 cookie 的一些劣势（每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等）而发明的（详细见原文：《Session variables without cookies》），后来 Kris Zyp 在此方法的基础上强化了 window.name 传输，并引入到了
复制链接

扫一扫