| |
Detailed
Previously mentioned with jsonp way to get cross-domain data, the next article, we will introduce how to use window.name + iframe cross-domain access to data.
First, we must understand the simple knowledge under window.name and the iframe. iframe html tag is, you can create a web page inline frames, there is a src attribute (address points to a file, html, php, etc.) you can select content inline frames, you can look at an example (Mengchuo here), probably know next on the list. Value window.name (usually in js code appear) is not an ordinary global variable, but the name of the current window to note here is that each package has its iframe's window, and this window is the top window of the child window, but it also has window.name natural attributes, magic window.name property values in that name after different pages (or even different domains) load is still there (if you do not modify the value does not change), and can support a very long name value (2MB).
Cross-domain solution seems to be ready to come out, assuming index.html page request to the remote server data, we create a iframe tag in the page, the iframe src attribute points to a file server address (the ability to use cross-domain iframe tag), server document set window.name value (that is, the name of the iframe contentWindow value), and then read the value of the iframe window.name in index.html, everything seemed to fall into place, as follows:
< Body>
< Script type = "text / javascript">
iframe = document.createElement ( 'iframe'),
iframe.src = 'http: // localhost: 8080 / data.php';
document.body.appendChild (iframe);
iframe.onload = function () {
console.log (iframe.contentWindow.name)
};
< / Script>
< / Body>
< ? Php
echo '< script> window.name = "{\" name \ ": \" hanzichi \ ", \" age \ ": 10}"; < / script>'
?>
What prompted protocol, host, port, three to be consistent, it is not a cross-border naked tell you what! Why this is so, it is stipulated that if the index.html page and this page and in the iframe src framework if a different source, you can not be anything in the framework of the operation, so they take less than iframe name value framework, and you tell us not one, you can never expect to get my data here. As to origin, it refers to another src, I said earlier, no matter how loaded window.name value will not change, so we index.html in the same directory, create a proxy.html empty page, modify the code as follows :
Copy the code
< Body>
< Script type = "text / javascript">
iframe = document.createElement ( 'iframe'),
iframe.src = 'http: // localhost: 8080 / data.php';
document.body.appendChild (iframe);
iframe.onload = function () {
iframe.src = 'http: // localhost: 81 / cross-domain / proxy.html';
console.log (iframe.contentWindow.name)
};
< / Script>
< / Body>
Ideal seems very good, in the iframe loaded, rapid reset iframe.src point, and make the index.html homologous, then the index page will be able to get the value of its name! But the reality is cruel, iframe performance is in reality has been constantly refreshed, well understood, after each time the trigger onload reset src, equivalent to reload the page, and trigger onload event, so do not He stopped to refresh (but can still required data output). After modifying the code as follows:
< Body>
< Script type = "text / javascript">
iframe = document.createElement ( 'iframe');
iframe.style.display = 'none';
var state = 0;
iframe.onload = function () {
if (state === 1) {
var data = JSON.parse (iframe.contentWindow.name);
console.log (data);
iframe.contentWindow.document.write ( '');
iframe.contentWindow.close ();
document.body.removeChild (iframe);
} Else if (state === 0) {
state = 1;
iframe.contentWindow.location = 'http: // localhost: 81 / cross-domain / proxy.html';
}
};
iframe.src = 'http: // localhost: 8080 / data.php';
document.body.appendChild (iframe);
< / Script>
< / Body>
to sum up
Cross-domain can be used in this way, there are several conditions is essential.
The ability to cross-domain iframe tag
Ability window.name property value in the document after refresh still exist
Be easier to understand some of the knowledge and under the window of contentWindow. The browser will create a window object for the original document, and then (iframe) to create an extra window object for each frame. These additional object is a child window of the original window, which may be affected by events of the original window. For example, close the original window will lead to close all child windows. contentWindow property refers to the specified frame or iframe where the window object.
Instructions
Many people may focus only use methods and principles very cold. This law in regard jsonp complicated, but also more complicated to use.
Usually the server output some js code, so the following example:
< ? Php
echo '< script> window.name = "{\" name \ ": \" hanzichi \ ", \" age \ ": 10}"; < / script>'
?>
Window.name value is a string, but also need to pass the data to the client (of course, if there is need for the server to be processed first pass over the data, only the data here only return), there is a need to go myself to resolve (eg string -> json data).
index.html page, I became a function of the method of packaging:
< Body>
< Script type = "text / javascript">
function crossDomain (url, fn) {
iframe = document.createElement ( 'iframe');
iframe.style.display = 'none';
var state = 0;
iframe.onload = function () {
if (state === 1) {
fn (iframe.contentWindow.name);
iframe.contentWindow.document.write ( '');
iframe.contentWindow.close ();
document.body.removeChild (iframe);
} Else if (state === 0) {
state = 1;
iframe.contentWindow.location = 'http: // localhost: 81 / cross-domain / proxy.html';
}
};
iframe.src = url;
document.body.appendChild (iframe);
}
// transfer
// server address
var url = 'http: // localhost: 8080 / data.php';
crossDomain (url, function (data) {// process data is window.name data value (string)
var data = JSON.parse (iframe.contentWindow.name);
console.log (data);
});
< / Script>
< / Body>
There is also a small problem, ie compatible (under the iframe onload ie use seems attachEvent, and json for ie compatible), friends who are interested to study the own (you can refer to the reference article); additional proxy agent can page without this document, it will report 404 but does not affect the functionality (but the path must be homologous and index page).
Another point worth considering is when the iframe src redirect code:
iframe.contentWindow.location = 'http: // localhost: 81 / cross-domain / proxy.html';
Then iframe.src point or server page, the code here if iframe.src = 'http: // localhost: 81 / cross-domain / proxy.html'; instead of also can output results, clever you know difference? |
|
|
|