Browser-origin policy:
1. The same protocol
2. The same domain name
3. The same port
If all three have a different, it will result in cross-domain; Ruan Yifeng teacher had mentioned in the text; if not homologous, it will:
Cookie, localStorage, IndexDB will not get to.
Dom could not get.
ajax request fails.
We can use the following methods:
1.iframe+window.domain
If there are two different sources of pages, for example: a.test.com and b.test.com;
We can set up two pages
document.domain="test.com";
Then we can use the method in the page window to achieve a share.
If we define a in a below:
document.A=function(){
console.log('i am contentA');
};
Then b in:
We call document.A (); // i am contentA;
We use this method to call b a cookie in a page.
2.iframe+window.name
window object has a name attribute, which has features: i.e. within a window (window) of the life cycle,
Window to load all the pages are sharing a window.name of,
Each page of window.name have read and write permissions. (Window.name value can only be a string, the maximum size of the string about 2M allow even a larger capacity, depending on the different browsers, generally enough.)
If there are two different sources of pages, for example: a.test.com and b.test.com;
In a medium:
If we set window.name = "i am a.html";
In the b:
<iframe id="b" src="a.test.com" onload="test()"></iframe>
js:
function test(){
var obj = document.getElementById("iframe");
obj.onload = function(){
msg = obj.contentWindow.name;
console.log(msg);
}
obj.src = "b.test.com/b1.html";
}
Set an empty page b1 accepted; we can see the output // i am a.html
3.iframe+window.postMessage()
One API html5 cool: cross-document messaging. Advanced browser Internet Explorer 8+, chrome, Firefox, Opera and Safari will support this feature. This feature is also very simple to achieve mainly include "postMessage" method "message" event to receive information and send messages.
Sending a message "postMessage" Method:
Send a message window to the outside world:
otherWindow.postMessage(message, targetOrigin);
otherWindow: refers to the target window, that is, to which window a message.
message: message to send, type String, Object (IE8,9 not supported)
targetOrigin: message reception range is defined, is not limited use '*'
If there are two different sources of pages, for example: a.test.com and b.test.com;
A is in the a.html:
js:
window.onload=function(){
if(typeof window.postMessage===undefined){
alert ( 'browser does not support window.postMessage')
}else{
window.top.postMessage({a:'i am a'},'b.test.com')
}
}
In the b:
html:
<iframe id="iframe" src="a.test.com/a.html" onload=""test()></iframe>
js:
function test(){
if(typeof window.postMessage===undefined){
alert ( 'browser does not support window.postMessage')
}else{
window.addEventListener("message",function(e){
if(e.origin==="a.test.com"){
console.log(e.data)//{a:'i am a'}
}
},false)
}
}
4.jsonp cross-domain
jsonp using script tag characteristics can be cross-domain access resources dynamically insert a script tag in the page, initiates a cross-domain request data to the server. After the server receives the request, the name of the data in a specified callback function returns;
function addScriptTag(src) {
var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag('http://example.com/ip?callback=foo'); } function foo(data) { console.log('Your public IP address is: ' + data.ip); };