Home > Developer > JavaScript
The so-called cross-domain, that is, if there is data interaction under different domain names, this time there will be cross-domain issues, here to explain that the same site in different folders of the data interaction is not a cross-domain problem.
What are the situations where cross-domain issues exist?There are cross-domain issues (such as and) between the primary domain and the subdomain www.a.com www.a.b.com .
There are cross-domain issues with different domain names, even if the two domains point to the same ip address.
Because it ajax is through XMLHttpRequest this object to interact with the data, and for the sake of XMLHttpRequest security is not allowed cross-domain interaction data, so ajax is not cross-domain.
What's that jsonp ? jsonp = json + padding(inner padding). In fact, he's using the inner filling principle to fill a box with something that is filled in, for json example, like this:box{{name:"laowang"}};
jsonpOne drawback is that you can only operate on a single domain , which means that we cannot modify the data of other websites through this website.
Used jsonp to cross-domain is usually more commonly used, in script the form of labels, script tags do not have cross-domain problems , we also refer to it as jsonp the form.
We can take script the inside as the src requested address, you know that the script tag is not just to request the js file, for example, it can also request php . As long as this page is finished, the result of the return is json or js it will not have a problem.
Example one:
</head><body><script type="Text/javascript">//a.com </script><!--If we introduce the PHP file of the B website, the data of a site can be transferred to the B website via SRC, the data of a website is added to the question mark, then the data is calculated on the B site, and the result is output, then we can call to B website in a website. Data-<script type="text/javascript" src="b.php?key=value&key2= value2 "></script></body>Example two:
(jsonp.html)<body><script type="Text/javascript"> //a.com//Note that the name here is the same, that is, the boxfunction box(JSON){// This time on the a site we can take this name value of alert (json.name); } </script><script type="text/javascript" src="1.jsonp.js " ></script></body>(jsonp.js)//b.com//我把数据写到盒子里面之后，我这个数据是在 b 网站的地址下面//的，而我们要调用的时候就可以利用回调的原理进行调用。‘laowang‘});
Effect Show | | Source
Dynamically createdjsonp
(jsonp.html)<script type="Text/javascript"> function createjs(surl){ varOscript = Document.createelement (' script '); Oscript.type =' Text/javascript '; OSCRIPT.SRC = sURL; document.getElementsByTagName (' head ')[0].appendchild (Oscript); } Createjs (' Jsonp.js?callbcak=box ');//This box must be consistent with box in Jsonp, but sometimes, //You don't know what the name is, then we can write a parameter and add it ourselves. //So that you can control the name. //That is:? Callbcak=box function box(JSON){alert (json.name); }</script>‘laowang‘});
Effect Show | | Source
2.location.hashThe values can be used location.hash across domains, because our cross-domain is nothing more than sending a request and then getting the page's data. We can do iframe location.hash cross-domain operations by leveraging them. The advantage of this approach is that two-domain operations can be performed.
principle: For example, I have a nested a site on the site at b iframe this time, we can add data to the script tag introduced by the php hash value, that is src="xxx.php#key1=value&key2=value2" , the hash value will not change after the page URL, so that can be Data to the b site, and then the b site can be parsed according to data, return data, and then the a site can parent.location.hash update the value of this page hash , then this time the a site can get the b data on the site.
But this method is under another domain, for the sake of security, some browsers are not supported, for ie example chrome , and we can not directly from the other domain to find its parent, so we will be able a to create a a page in the site The page of the website.
For example, create a new page yyy.html , he is also a the site, and then add the data to a this page of the site yyy.html , add the number, this time we can be in the a site through this method to parent.location.hash = self.location.hash obtain data, Because they are now under the same domain, this can be changed by changinghashValues to interact with the data between the two domains.
can also be used window.name to solve cross-domain problems, this is relatively safe, because the content is written on the ' Window.name, will not be exposed.
principle: There are now two sites, the two sites below each have a page www.a.com -->a1.html 和 www.b.com -->b1.html , and then we also a a1.html create a label below the site, iframe and then src specify the b site data of b1 this page, and then we b b1.html window.name = ‘数据‘; can write the data below the website.
After writing, when a1 loaded, we are b1 going to create a1 a proxy file below, after the creation of the www.b.com --> agent.html proxy file and window.name is shared data, this time when I request again a1.html , you can use the proxy to fetch the data.
This and hash the principle is actually similar, are in their own domain to create a current domain to use the data of a proxy file, and then through the proxy and the current file in the same domain under a principle, and then submit the data in the past.
Set between the subdomain and the primary domaindocument.domain = ‘主域名的网址‘；
Different domain name through the server proxy solution: The server Agent is through the server to do this object XMLHttpRequest proxy file, and then the server to do the operation, his advantage is that you can do any desired data interaction, and its disadvantage is to increase the pressure on the server.
flashCross-domain issues can also be resolved.
postMessageIs html5 the method, interested students can go to see for themselves.
Cross-domain explanation in JavaScript (source code included)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
