JS跨越问题解决方法

梦里梦外; 2022-05-26 06:25 231阅读 0赞

# 转载地址：[https://blog.csdn.net/hsd2012/article/details/52647873][https_blog.csdn.net_hsd2012_article_details_52647873]    #

# 一.同源策略的限制 #

首先，我们需要知道跨域就是在不同的域之间进行数据传输或通信。只要协议、域名、端口有任何一个不同，都被当作是不同的域。当要想跨域，就得理解浏览器的同源策略限制。

其限制之一就是**我们说的不能通过ajax的方法去请求不同源中的文档**。 它的第二个限制是**浏览器中不同域的框架之间是不能进行js的交互操作的**。

关于第二个限制，比如，有一个页面，它的地址是http://www.findme.wang/index.html  ， 在这个页面里面有一个iframe，它的src是http://manual.findme.wang/search.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的内容。

# 二.为什么要跨域 #

因为浏览器同源策略限制，我们没法在两个不同的域直接进行数据传输或通信。如以下代码：

**\[javascript\]** [view plain][] [copy][view plain]

1.  <script type="text/javascript" src="jquery.js"></script>  
2.  <script>  
3.  $.post('https://www.baidu.com',function(text)\{  
4.      console.log(text);  
5.  \});  
6.  </script>

**\[javascript\]** [view plain][] [copy][view plain]

执行结果如下：

![Center][]

# 三、怎样实现跨域 #

1、通过jsonp跨域（针对限制一）

在js中，虽然我们不可以直接用XMLHttpRequest请求不同域上的数据，但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

比如，某域下有个index.html页面，它里面的代码需要利用ajax获取一个不同域上(如http://www.findme.wang)的json数据

实现方式如下

index.html内容如下：

**\[javascript\]** [view plain][] [copy][view plain]

1.  <script>  
2.  //回调函数  
3.  function show(oJson)\{  
4.      //dosomething  
5.      console.log(oJson\['str'\]);  
6.  \}  
7.  </script>  
8.  <script type="text/javascript" src="http://www.findme.wang/test.php?callback=show&name=dqs"></script>

**\[javascript\]** [view plain][] [copy][view plain]

在http://www.findme.wang域上，要有一个test.php文件，返回一个js文件，并在该文件中，调用回调方法show,内容如下

**\[php\]** [view plain][] [copy][view plain]

1.  $callback=$\_GET\['callback'\];  
2.  $name=$\_GET\['name'\];  
3.  $data=array('str'=>'hello,'.$name);  
4.  echo $callback.'('.json\_encode($data,JSON\_UNESCAPED\_UNICODE).')';

**\[php\]** [view plain][] [copy][view plain]

1.  $callback=$\_GET\['callback'\];  
2.  $name=$\_GET\['name'\];  
3.  $data=array('str'=>'hello,'.$name);  
4.  echo $callback.'('.json\_encode($data,JSON\_UNESCAPED\_UNICODE).')';

结果如下：

![Center 1][]

原理分析：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。当然jsonp是需要服务器端的页面进行相应的配合的。

2、通过修改window.name来跨子域（针对限制二）

为了更加现实效果，我在本地http://localhost/下的index.html文件通过iframe引入了http://www.findme.wang/test.php和http://localhost/test.php，通过JS获取iframe文件中的内容。

index.html文件

**\[html\]** [view plain][] [copy][view plain]

1.  <script type="text/javascript" src="jquery.js"></script>  
2.  <iframe src="http://www.findme.wang/test.php" id="test\_box1"></iframe>  
3.  <iframe src="http://localhost/test.php" id="test\_box2"></iframe>  
4.  <script type="text/javascript">  
5.      $(function()\{  
6.          //针对不同的域名  
7.          $('\#test\_box1').load(function()\{  
8.              //我们能获取到window对象，但是没法获取window对象的属性和方法  
9.              var oiframe1=$("\#test\_box1");  
10.             var doc1=oiframe1.contents();  
11.             console.log(doc1);  
12.             var div1=doc1.find("\#div1");  
13.             console.log(div1.html());  
14.         \})  
15.   
16.         //针对相同的域名  
17.         $('\#test\_box2').load(function()\{  
18.             var oiframe2=$("\#test\_box2");     
19.             var doc2=oiframe2.contents();  
20.             console.log(doc2);  
21.             var div2=doc2.find("\#div2");  
22.             console.log(div2.html());  
23.         \});  
24.     \});  
25. </script>

**\[html\]** [view plain][] [copy][view plain]

http://www.findme.wang/test.php文件如下

**\[html\]** [view plain][] [copy][view plain]

1.  <html>  
2.  <head>  
3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
4.      <title>测试</title>  
5.  </head>  
6.  <body>  
7.      <div id="div1">  
8.          域名：www.findme.wang；你好啊！！！  
9.      </div>  
10. </body>  
11. </html>

**\[html\]** [view plain][] [copy][view plain]

http://localhost/test.php文件如下

**\[html\]** [view plain][] [copy][view plain]

1.  <html>  
2.  <head>  
3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
4.      <title>测试</title>  
5.  </head>  
6.  <body>  
7.      <div id="div2">  
8.          域名：localhost；你好啊！！！  
9.      </div>  
10. </body>  
11. </html>

**\[html\]** [view plain][] [copy][view plain]

结果如下

![Center 2][]

从结果可以看出，这个案例证实了浏览器中不同域的框架之间是不能进行js的交互操作的。怎样实现他们的交互操作呢？**使用HTML5中新引进的window.postMessage方法来跨域传送数据。**window.postMessage(message,targetOrigin)  方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

# 补充 #

# 1.如何获取iframe的document对象 #

[W3C][]的标准告诉我们，可以通过[Dom对象][Dom]的contentDocument属性来返回文档对象。

**\[javascript\]** [view plain][] [copy][view plain]

1.  var doc = document.getElementById('mainFrame' ).contentDocument

**\[javascript\]** [view plain][] [copy][view plain]

1.  var doc = document.getElementById('mainFrame' ).contentDocument

IE8开始支持,如果你的项目不用兼容IE6，[IE7][]的话使用这种方式最好。

IE6,[IE7][]需要如此访问

**\[javascript\]** [view plain][] [copy][view plain]

1.  var doc = document.frames\['mainFrame'\].document;

**\[javascript\]** [view plain][] [copy][view plain]

1.  var doc = document.frames\['mainFrame'\].document;

兼容方式：

**\[javascript\]** [view plain][] [copy][view plain]

1.  var doc = document.getElementById('mainFrame' ).contentDocument || document.frames\['mainFrame'\].document;

**\[javascript\]** [view plain][] [copy][view plain]

1.  var doc = document.getElementById('mainFrame' ).contentDocument || document.frames\['mainFrame'\].document;

以上是Javascript原生方法：

使用Jquery则简单些

**\[javascript\]** [view plain][] [copy][view plain]

1.  $('\#frameID').load(function () \{  
2.      $('\#frameID').contents().find('\#div1');//在frame中找id为div1的元素  
3.  \});

**\[javascript\]** [view plain][] [copy][view plain]

1.  $('\#frameID').load(function () \{  
2.      $('\#frameID').contents().find('\#div1');//在frame中找id为div1的元素  
3.  \});

[https_blog.csdn.net_hsd2012_article_details_52647873]: https://blog.csdn.net/hsd2012/article/details/52647873
[view plain]: https://blog.csdn.net/hsd2012/article/details/52647873#
[Center]: /images/20220526/6ae5087df4d54d1db07ded2f42a96f17.png
[Center 1]: /images/20220526/15602d95d900401f9a5a9210fe981c5a.png
[Center 2]: /images/20220526/3d185f8fac104f60adf67604c8af222d.png
[W3C]: https://www.baidu.com/s?wd=W3C&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBrjI9nAmkm1--n1bsnyfd0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHmYnHbzPWD1
[Dom]: https://www.baidu.com/s?wd=Dom%E5%AF%B9%E8%B1%A1&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBrjI9nAmkm1--n1bsnyfd0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHmYnHbzPWD1
[IE7]: https://www.baidu.com/s?wd=IE7&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBrjI9nAmkm1--n1bsnyfd0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHmYnHbzPWD1