web跨域通信问题解决

Web页面的跨域问题产生原因是企图使用JS脚本读写不同域的JS作用域。问题根源来自JavaScript的同源策略:出于安全考虑,Javascript限制来自不同源的web页面JS脚本之间进行交互。否则就会出现各种获取用户私密数据的问题。

1、document.domain

它只能只能解决一个域名下的不同二级域名页面跨域,例如person.aa.com与book.aa.com,可以将book.aa.com用iframe添加到 person.aa.com的某个页面下,在person.aa.com和iframe里面都加上document.domain = "aa.com"。

2、Jsonp

Jsonp可以解决XmlHttpRequest请求不能跨域的限制,原理是通过动态创建一个<script> 元素来请求一段JS脚本,让这段脚本在页面作用域里执行,迂回实现类似Ajax的请求。

 1 //加载js文件

 2 function load_script(url, callback){  

 3     var head = document.getElementsByTagName('head')[0];  

 4     var script = document.createElement('script');  

 5     script.type = 'text/javascript';  

 6     script.src = url;  

 7     script.onload = script.onreadystatechange = function(){  

 8 if((!this.readyState||this.readyState === "loaded"||this.readyState === "complete")){  

 9             callback && callback();  

10             // Handle memory leak in IE  

11             script.onload = script.onreadystatechange = null;  

12             if ( head && script.parentNode ) {  

13               head.removeChild( script );  

14             }  

15         }  

16     };   

17     head.insertBefore( script, head.firstChild );  

18 }
View Code

3、用HTML5的API

HTML5提供了一个可以让我们跨域通信的API:postMessage,支持的浏览器有 Internet Explorer 8.0+, Chrome 2.0+、Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+。window.postMessage方法被调用时,目标窗口的message事件即被触发,这样可以实现不同域直接的信息交流。

假设A页面中包含iframe B页面

 1 var winB = window.frames[0];

 2  

 3 winB.postMessage('hello iframe', 'http://www.test.com');

 4  

 5 //B页面(监听message事件、获取信息)

 6  

 7 window.addEventListener('message',function(e){

 8  

 9 // ensure sender's origin

10  

11 if(e.origin == 'http://www.aa.com'){

12  

13     console.log('source: ' + e.source);

14  

15     console.log('Message Received: ' + e.data);

16  

17 }

18  

19 },false) 

PS. 通信事件没有冒泡.

4、window.name

window.name一般用来获取子窗口:window.frames[windowName];它有个重要特点:一个窗口无论加载什么页面,window.name都保持不变。而这个特点可以用来进行跨域信息传递。例如3个页面分别为A、B、C。A是主页面,里面嵌入了一个iframe:B页面。B页面对window.name进行赋值,接下来重定向到C页面。C页面在另外一个域里面,它的功能就是读取出B页面写入的window.name。

 1 <!-- A页面 -->

 2 <html>

 3 <head>

 4 <title> Page A</title>

 5 </head>

 6 <body>

 7     <iframe src=”B.html” />

 8 </body>

 9 </html>

10 

11 <!-- B页面 -->

12 <html>

13 <head>

14 <title> Page B </title>

15 </head>

16 <body> 

17 <script language=”JavaScript”>

18 var a = [];

19 for (var i = 0;i < 10; i++){

20     a.push(’xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’+i);

21 }

22 window.name= a.join(''); //写入window.name,这里可以写入一个比较大的值

23 window.location.href = ‘http://www.cc.com/C.html’;

24 </script>

25 </body>

26 </html>

27 

28 <!-- C页面 -->

29 <html>

30 <head>

31 <title> Page C </title>

32 </head>

33 <body>

34 <script language=”JavaScript”>

35 document.write(window.name);//读出window.name,并写到页面上

36 </script>

37 </body>

38 </html>
View Code

可以看到C页面正常输出了B页面写入的window.name。

你可能感兴趣的:(Web)