Js here that the cross-domain data transmission means or communication between different domains via js, such as using a different domain ajax to request data or frame data acquired in the page in a different domain (iframe) by js. As long as the protocol, domain name, a different port any, are treated as different domains.
The following table gives the results of the relative homologous http://store.company.com/dir/page.html detected:
To solve the problem of cross-domain, we can use the following methods:
First, the cross-domain by jsonp
In js, the data request on different domains we directly use the XMLHttpRequest, it is not possible. However, the introduction js script files on different domains on a page it is possible, jsonp is using this feature to achieve.
For example, there is a a.html page, it needs to use the code inside ajax json data acquired on a different domain, it is assumed that the data address is json http://example.com/data.php , then the code a.html you can do:
We see the address and there are a callback parameter acquisition data, this convention is to use the parameter name, but you can use other, too. Of course, if the acquired data is not jsonp address of the page you can control, you have to provide data in accordance with the format of that party to operate.
Because it is introduced as a js file, so http://example.com/data.php returned must be able to execute a js file, so this page php code might look like this:
The end result is that the output of the page:
So by http://example.com/data.php?callback=dosomething JS files get that we defined earlier dosomething function, and its argument is that we need json data, so that we get that we need cross-domain The data.
Such jsonp principle is very clear, the introduction of a js file via a script tag, this js file loaded successfully performs the function we specified in the url parameter, and we will need the json data as a parameter. So jsonp need server-side page corresponding mating.
I know we can dynamically generate the jsonp principle of cross-domain with js script tag to operate a cross-domain, instead of manually writing specifically those script tags. If your page uses jquery, it can easily be manipulated by methods jsonp its package.
The principle is the same, but we do not need to manually insert script tags as well as the definition of back off function. jquery automatically generates a global function to replace callback =? question mark, after obtaining the data and then automatically destroyed, in fact, act as a caretaker function. $ .GetJSON method will automatically determine whether a cross-domain, not across domains, then it calls ordinary ajax method; cross-domain, then this will be loaded asynchronously form js file to invoke jsonp callback function.
2, by modifying the document.domain come across subdomains
Browsers have a same-origin policy, one that does not limit the method by ajax the first method we are talking about is to request a different source documents. A second limitation is that it can not interact js of the browser frame between different domains. Be made clear that, between the different frame (parent-child or peer), to each be able to obtain the window object, but boring is that you can not use the properties and methods (the postMessage method html5 acquired window object It is an exception, and some browsers can be used for example ie6 top, parent and a few other attributes), in short, as you can only get to be a virtually useless window object. For example, there is a page, its address is http://www.example.com/a.html , in which this page has an iframe, it's src is http://example.com/b.html , apparently this page and inside it is a different domain iframe framework, so we are unable to write by js code in the page to get something in the iframe:
This time, document.domain can come in handy, as long as we http://www.example.com/a.html and http://example.com/b.html the document.domain both pages are set to the same domain name on it. But it should be noted that, document.domain setting is limited, we can only document.domain set itself a higher level or parent domain, and the primary domain must be the same. For example: abexample.com document.domain in a document can be set to abexample.com, b.example.com, example.com any one, but can not be set to cabexample.com, because this is a child of the current domain domain, can be set to not Baidu.com, no longer the same as the primary domain.
In the page http://www.example.com/a.html set document.domain:
In the page http://example.com/b.html also set the document.domain, but it is necessary, set the value of document.domain Although this document domain is example.com, but still must be displayed:
So that we can have access to various properties and objects in the iframe by js.
不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。如果你想通过ajax的方法去与不同子域的页面交互，除了使用jsonp的方法外，还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。
3、使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
比如：有一个页面a.html,它里面有这样的代码：
再看看b.html页面的代码：
a.html页面载入后3秒，跳转到了b.html页面，结果为：
我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话，那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然，如果有需要，其中的任何一个页面都可以对window.name的值进行修改。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。
上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用window.name进行跨域的原理。
下面就来看一看具体是怎么样通过window.name来跨域获取数据的。还是举例说明。
比如有一个www.example.com/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。
data.html页面里的代码很简单，就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码：
那么在a.html页面中，我们怎么把data.html页面载入进来呢？显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面，因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。
充当中间人的iframe想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，还必须把这个iframe的src设成跟a.html页面同一个域才行，不然根据前面讲的同源策略，a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。
看下a.html页面的代码：
上面的代码只是最简单的原理演示代码，你可以对使用js封装上面的过程，比如动态的创建iframe,动态的注册各种事件等等，当然为了安全，获取完数据后，还可以销毁作为代理的iframe。网上也有很多类似的现成代码，有兴趣的可以去找一下。
通过window.name来进行跨域，就是这样子的。
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
The above mentioned object message is sent to the other window, in fact, it refers to a page there are several frameworks that case, because each frame has a window object. In discussing the second method, we said, the framework between different domains can get to the other side of the window object, but can also be used window.postMessage this method. Let's look at a simple example, there are two pages
We get after running a results page:
We see the success of page b received the message.
PostMessage to use cross-domain transmit data is quite intuitive and easy, but the drawback is IE6, IE7 does not support, do not have to use it to decide according to actual needs.
Conclusion:
In addition to the above methods, as well as flash, set the proxy page and other cross-domain mode on the server, not be introduced here.
Above four methods can be selected according to the actual situation of the project application, the method does not think window.name complex, also compatible with almost all browsers a cross-domain method which is really excellent.
---------------------
Author: Warriors
Source: CNBLOGS
Original: https: //www.cnblogs.com/2050/p/3191744.html
Disclaimer: This article author original article, reproduced, please attach Bowen link!
Content analysis By: CSDN, CNBLOG blog articles reprinted a key plug