What is cross-domain? What is cross-domain?
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.
Why can't Ajax cross the domain?
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.
How to solve cross-domain problems? 1.jsonp
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"}};
jsonp
One 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.hash
The 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 changing
hash
Values to interact with the data between the two domains.
3.window.name
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.
4.document.domain
Set between the subdomain and the primary domaindocument.domain = ‘主域名的网址‘;
5. Server Agent
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.
6.flash
flash
Cross-domain issues can also be resolved.
7.postMessage
postMessage
Is html5
the method, interested students can go to see for themselves.
Cross-domain explanation in JavaScript (source code included)