浅谈获取DOM跨域的解决方案——document.domain、window.name、window.postMessage

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

筱葭

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

阅读量6.9k

点赞数 1

分类专栏： Web 文章标签： DOM 跨域 document.domain window.name window.possMessage

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/61414403

版权

Web 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。

获取DOM的跨域解决方案：

（1）如果两个窗口一级域名相同，只是二级域名不同，那么设置document.domain属性，即可跨域获取DOM。

例如，可以在http://www.msnova.net/a.html和http://blogs.msnova.net/b.html两个文件中分别加上document.domain = “msnova.net”；然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。这种办法只能解决主域相同而二级域名不同的情况。

http://blogs.msnova.net/b.html

document.domain = "msnova.net";

http://www.msnova.net/a.html

document.domain = "msnova.net";
var ifr = document.createElement('iframe');
ifr.src = 'http://blogs.msnova.net/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
	var x = ifr.contentDocument;
	alert(x.getElementsByTagName("h1")[0].childNodes[0].nodeValue); //操作b.html
	ifr.onload = null;
}

（2）否则，可以通过window.name和window.postMessage跨域获取DOM

2-1）window.name

http://JavaScript.exam.com/text.html：

<!DOCTYPE html>  
<html>  
    <head>  
    </head>  
    <body>  
        <script>  
		window.name = "value";		
	</script>  
    </body>  
</html>

http://catagory.exam.com/text.html：

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<iframe id="iframe" οnlοad="loading()" src="http://javascript.exam.com/text.html"></iframe>
		<script>
			var load = false;
			function loading() {
				if (load == false) {
					// 同域处理，请求后会再次重新加载iframe
					document.getElementById('iframe').contentWindow.location = 'http://catagory.exam.com/index.html';
					load = true;
				} 
				else {
					// 获取window.name的内容，注意必须进行同域处理后方可访问！
					alert(document.getElementById('iframe').contentWindow.name); //输出：value
					load = false;
				}
			}
		</script>
	</body>
</html>

2-2）window.postMessage

http://catagory.exam.com/text.html：

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<iframe id="iframe" src="http://JavaScript.exam.com/Test/text.html"></iframe>
		<script>
			window.onload = function() { 
				document.getElementById('iframe').contentWindow.postMessage('Hello', "http://JavaScript.exam.com");  
			};  
		</script>
	</body>
</html>

http://JavaScript.exam.com/text.html：

<!DOCTYPE html>  
<html>  
    <head>  
        <title></title>  
    </head>  
    <body>  
        <script>  
			window.addEventListener('message', function(event){  
				// 通过origin属性判断消息来源地址  
				if (event.origin == 'http://catagory.exam.com') 
					alert(event.data); //输出：Hello 
			}, false);  	
		</script>  
    </body>  
</html>

筱葭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
浅谈获取DOM跨域的解决方案——document.domain、window.name、window.postMessage

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。获取DOM的跨域解决方案：（1）如果两个窗口一级域名相同，只是二级域名不同，那么设置document.domain属性，即可跨域获取DOM。（2）否则，可以通过window.name和window.postMessage跨域获取DOM2-
复制链接

扫一扫