Use jsonp, iframe, and location. hash to solve cross-origin problems

Use jsonp, iframe, and location. hash to solve cross-origin problems

Several methods to solve js cross-Origin

Cross-origin of js: Due to the same-origin browser policy, any one of the three request url protocols, domain names, and ports

Different from the current page address, this is cross-origin. Example:

 

Note: different ports and protocols can only be solved through the background.
Solution:
1. script tag format: jsonp
2.doc ument. domain
3. Server proxy 4. window. name
5. flash
6. html5 postMessage
7. iframe and location. hash

Through jsonp

In js, when we directly use the XMLHttpRequest object in ajax to request data in different domains, this is not acceptable,

Cross-origin is not allowed. However, it is possible to introduce js script files in different domains on the page. jsonp uses this feature

.
For example, if an a.html page exists, the code in it needs to use ajax to obtain json data from different domains.

The code in a.html can be written as follows:

Script type = "text/javascript"> function jonpCallBack (data) {}< script type = "text/javascript" src = "http://example.com/data.php? Callback = jonpCallBack "> </script> or automatically create js to join the page: function createJs (sUrl) {var oScript = document. createElement ('script'); oScript. type = 'text/javascript '; oScript. src = sUrl; document. getElementsByTagName ('head') [0]. appentChild (oScript);} createJs ('HTTP: // example.com/data.php? Callback = jonpCallBack ');

After the js file is loaded successfully, the function specified in the url parameter will be executed, and the json data we need will be

Input as a parameter. Therefore, jsonp requires the server-side pages to be matched accordingly.

Php code:

The output result is jonpCallBack (['A', 'B', 'C']).

If jQuery is used, jsonp can be conveniently operated through its encapsulation method.

<Script type = "text/javascript"> $. getJSON ('HTTP: // example.com/data.php? Callback = ?, Function (jsondata) ') {// process the obtained json data}); </script>

Jquery automatically generates a global function to replace callback =? After obtaining the data

It is actually a temporary proxy function. $. The getJSON method automatically determines whether the cross-origin is used,

If the cross-origin mode is not used, the common ajax method is called. If the cross-origin mode is used, the js file is asynchronously loaded.

Jsonp callback function.

Use iframe and location. hash:

This method can also solve the problem of full cross-origin, and use location. hash to transmit values. In the url:

Http://a.com # helloword '# helloworld' is location. hash, changing the hash will not export

Therefore, the hash value can be used for data transmission. Of course, the data capacity is limited. Assume Domain Name

A.comfile cs1.html and cs2.htmlunder cnblogs.comdomain name

Automatically create a hidden iframe. iframesrcrefers to the cs2.html page under cnblogs.comdomain name,

The hash value can be used for parameter transfer. After cs2.htmlresponds to the request, the hash value of cs1.html will be modified.

(Because the two pages are not in the same domain, IE and Chrome cannot be modified.

The value of parent. location. hash, so you need to use a proxy iframe under the.com domain name; Firefox can

To modify ). Add a timer to cs1.html at the same time to judge whether the location. hash Value is

If there is any change, the hash value is obtained. The Code is as follows:
First, the cs1.html file under a.com:

Function startRequest () {var ifr = document. createElement ('iframe'); ifr. style. display = 'none'; ifr. src = 'HTTP: // www.cnblogs.com/lab/cscript/cs2.html?paramdo'; document. body. appendChild (ifr);} function checkHash () {try {var data = location. hash? Location. hash. substring (1): ''; if (console. log) {console. log ('Now the data is '+ data) ;}} catch (e) {};} setInterval (checkHash, 200020.20.20.cs2.html under cnblogs.comdomain Name: // simulate a simple parameter processing operation switch (location. hash) {case '# paramdo': callBack (); break; case '# paramset': // do something ...... Break;} function callBack () {try {parent. location. hash = 'somedata';} catch (e) {// ie, chrome's security mechanism cannot be modified. location. hash, // so use the proxy iframe var ifrproxy = document under an intermediate cnblogs domain. createElement ('iframe'); ifrproxy. style. display = 'none'; ifrproxy. src = 'HTTP: // a.com/test/cscript/cs3.html?somedata'; // note that the file is in the "a.com" Domain document. body. appendChild (ifrproxy );}}

A.comdomain name cs3.html

// Because of parent. the parent and itself belong to the same domain, so you can change its location. hash Value parent. parent. location. hash = self. location. hash. substring (1 );

Of course, this also has many disadvantages, such as direct data exposure to URLs and limited data capacity and types.