Four methods and principles of javascript cross domain

  • 2020-03-30 02:33:29
  • OfStack

The following table shows the relative homology detection results: http://store.company.com/dir/page.html

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116571.png" width = 532 height = 203 >

To solve the cross-domain problem, we can use the following methods:

First, cross domain through jsonp

In js, it is not possible to directly request data on different domains using XMLHttpRequest. However, it is possible to introduce js script files on different domains on the page, and jsonp takes advantage of this feature.

For example, a a.h HTML page, it's code needs to use ajax to get a json data on different domains, assuming that the json data address is http://example.com/data.php, then a.h in the HTML code you can like this:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116572.png" width = 527 height = 110 >

We see that the address where the data is retrieved is followed by a callback parameter, which by convention is the parameter name, but you can do the same with the others. Of course, if you can't control the jsonp address page that you're getting the data from, you'll have to follow the format of the party that provided the data.

Because is introduced as a js file, so http://example.com/data.php returns must be a can perform the js file, so the PHP code of the page is likely to be like this:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116573.png" width = 362 height = 87 >

The final output of that page is:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116574.png" width = 208 height = 34 >

So through http://example.com/data.php? Callback = the js file that dosomething gets, which is the dosomething function we defined earlier, and its parameters are the json data we need, so we get the data we need across the domain.

This makes the principle of jsonp clear, by introducing a js file through the script tag, the js file will execute the function we specified in the url parameter after loading successfully, and will pass in the json data we need as the parameter. Therefore, jsonp requires the corresponding page coordination on the server side.

Once we know how jsonp works across domains, we can use js to dynamically generate script tags for cross-domain operations, instead of manually writing those script tags. If your page USES jquery, it's easy to jsonp with its encapsulated methods.

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116575.png" width = 520 height = 87 >

The principle is the same, except that we don't need to manually insert script tags and define callback functions. Jquery automatically generates a global function to replace callback=? In the question mark, after the data will be automatically destroyed, is actually a temporary proxy function. The $.getjson method automatically determines whether it is cross-domain or not. Across domains, the jsonp callback function is called in the form of an asynchronously loaded js file.    

2. Cross subdomains by modifying document.domain

Browsers have a same-origin policy, and one of its limitations is that in the first method we said you can't request documents from different sources through ajax methods. The second limitation is that there is no js interaction between frameworks in different domains in the browser. One thing to note, between different framework (father and son or siblings), is to be able to access to each other's window object, but the hurt is that you cannot use the access to the window object's properties and methods (postMessage method is an exception in HTML 5, also some browsers such as ie 6 can also use top, a few properties such as the parent), in a word, you can treat as is almost useless can only get a window object. For example, a page, it is the address of the http://www.example.com/a.html  , there is an iframe in this page, it's the SRC is http://example.com/b.html, obviously, this page is different domains with it inside the iframe framework, so we wouldn't be captured by writing javascript code in the page to get the things in the iframe:

  < img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116576.png" width = 796 height = 160 >

This time of the document. The domain can come in handy, as long as we put the http://www.example.com/a.html and http://example.com/b.html these two page document. The domain are set to the same domain name. However, it is important to note that the setting of document.domain is limited. We can only set document.domain as a parent domain of itself or higher, and the primary domain must be the same. For example, the document.domain of a document in a.b.example.com can be set to any of a.b.example.com, b.example.com, or example.com, but it cannot be set to c.a.b.example.com, because it is a subdomain of the current domain, and it cannot be set to baidu.com, because the primary domain is already different.

The document in the page http://www.example.com/a.html. Domain:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116577.png" width = 554 height = 118 >

Also set up the document in the page http://example.com/b.html. Domain, and it is also necessary, although the document domain is example.com, but still must display Settings document. The value of the domain:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116578.png" width = 754 height = 52 >

This allows us to access the various properties and objects in the iframe through js.

But if you want to be on the http://www.example.com/a.html page through ajax request http://example.com/b.html page directly, even if you set the same document. The domain is still not enough, so modifying the document. The domain method is only applicable to the interaction between the framework of different subdomains. If you want to use ajax methods to interact with pages in different subdomains, in addition to using jsonp methods, you can also use a hidden iframe as a proxy. Principle is to make the iframe load you want through ajax to get the data of the target page in the same domain page, so it's normal in the iframe page using ajax to retrieve the data you want, and then through speak we just modify the document. The domain method, we can through the js complete control of the iframe, so we can make the iframe to send an ajax request, and then receive the data we can also be obtained.    

3. Use window.name to cross domains

Window object has a name attribute, this property has a characteristic: in the life of a window (the window) cycle, window to load all of the pages are Shared a window. The name of each page in the face of the window. The name has to read and write permissions, window. The name is persistent load of all the pages, a window will not be reset due to the new page load.

For example, there is a page a.html, which contains the following code:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/201404081116579.png" width = 399 height = 102 >

Take a look at the code for the b.html page:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/2014040811165710.png" width = 302 height = 57 >

3 seconds after loading the a.html page, it jumps to the b.html page, and the result is:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/2014040811165711.png" width = 461 height = 373 >

We see that on the b.html page, the value set by a.html on its previous page to window.name is successfully obtained. If the window.name is not changed on all subsequent pages loaded, the value of window.name that all these pages get is the value set on the a.html page. Of course, any of these pages can change the value of window.name if needed. Note that the value of window.name can only be in the form of a string. The maximum size of this string allows for a capacity of about 2M or more, depending on the browser, but it is usually sufficient.

In the above example, the page a.html and b.html we used are in the same domain, but even if a.html and b.html are in different domains, the above conclusion still applies, which is exactly the principle of using window.name to cross domains.

Let's take a look at how window.name is used to fetch data across domains. Let me give you an example.

Have an www.example.com/a.html page, for example, needs through a.h js to get another HTML page in different domain data in a page on www.cnblogs.com/data.html.

The code in the data.html page is as simple as setting the current window.name to the desired value for the a.html page. Code in data.html:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/2014040811165712.png" width = 756 height = 57 >

So how do we load the data.html page into the a.html page? Obviously we can't load the data.html page directly in the a.html page by changing the window.location, because we want to get the data in data.html even if the a.html page doesn't jump. The answer is to use a hidden iframe in the a.html page to act as a middleman. The iframe retrieves the data.html data, and a.html retrieves the iframe data.

Acting as an intermediary iframe want access to the data. The HTML through the window. The name set of data, only need to set the iframe SRC to www.cnblogs.com/data.html. Then a.html must set the SRC of this iframe to be the same field as the a.html page in order to get the data obtained by the iframe, which is the window.name value of the iframe. Otherwise, according to the same origin policy mentioned earlier, a.html cannot access the window.name attribute in the iframe. That's the whole cross-domain process.

Look at the code of the a.html page:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/2014040811165813.png" width = 958 height = 323 >

The above code is just the simplest principle to demonstrate the code, you can use js to encapsulate the above process, such as dynamic creation of iframe, dynamic registration of various events, etc., of course, for security, after the data, you can also destroy as a proxy of the iframe. There are many similar off-the-shelf codes available on the Internet, and those interested can look them up.

Window.name, that's what it looks like.    

4. Use the newly introduced window.postmessage method in HTML5 to transfer data across domains

The window object that calls the postMessage method is the window object that is supposed to receive the message. The second parameter, targetOrigin, is used to qualify the field of the window object that received the message. .

The window object that needs to receive the message, but gets the message by listening for its own message event, which is stored in the data attribute of the event object.

By sending a message to another window object, I mean that a page has several frames, because each frame has a window object. When we discussed the second method, we said that frames in different fields can get each other's window objects, and we can also use the window.postmessage method. Let's look at a simple example with two pages

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/2014040811165814.png" width = 691 height = 152 >

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/2014040811165815.png" width = 437 height = 120 >

The result after we run page a:

< img border = 0 title = QQ screenshots 20130613230631 border = 0 Alt = QQ screenshots 20130613230631 SRC = "/ / files.jb51.net/file_images/article/201404/2014040811165816.png" width = 449 height = 300 >

We see that page b received the message successfully.


Related articles: