This article introduces how to get data across domains using JSONP, this paper describes how to use Window.name+iframe cross-domain to obtain data.
First of all, we need to understand the knowledge of window.name and IFRAME. IFrame is a tag of HTML, you can create an inline frame in the Web page, there is a src attribute (point to the file address, HTML, PHP, etc.) can choose the contents of the inline frame, you can see an example (poke here), probably understand the next line. The value of window.name (usually appearing in JS code) is not a normal global variable, but the name of the current window, it is important to note that each iframe has a window that wraps it, and this window is a subwindow of the top window. And it naturally has window.name properties, andthe magic of the Window.name property is that the name value persists after loading different pages (or even different domain names) (the values do not change if not modified), and can support very long name values (2MB).
The cross-domain solution seems to be ready, assuming that the Index.html page requests data from the remote server, we create a new IFRAME tag under this page that points to the server file address (cross-domain capability leveraging the IFRAME label). The value of the Window.name is set in the server file (that is, the name value of the Contentwindow of the IFRAME), and then the window.name value of the IFRAME is read in index.html, and everything seems to be the following code:
<body> <script type= "Text/javascript" > = document.createelement (' iframe '), = ' http://localhost:8080/data.php '; Document.body.appendChild (IFRAME); function () { console.log (iframe.contentWindow.name) }; </script></body><? PHP Echo ' <script> window.name = "{\" name\ ": \" hanzichi\ ", \" age\ ": 10}"; </script> '?>But unfortunately, the error has been made.
Hint what protocol, host, Port three should be consistent, this is not bare to tell you cross-domain it! Why this, because the stipulation if the Index.html page and the IFRAME frame in the page src if it is not homologous, you can not manipulate anything in the frame, so I can not get the name of the IFRAME frame, tell you that we are not a family, you can not get my data here. Since the homologous, then change the SRC to refer to, the front said no matter how to load window.name value will not change, so we in index.html the same directory, a new proxy.html empty page, modify the code as follows:
<body> <script type= "Text/javascript" > = document.createelement (' iframe '), = ' http://localhost:8080/data.php '; Document.body.appendChild (IFRAME); function () { = ' http://localhost:81/cross-domain/proxy.html '; Console.log (Iframe.contentWindow.name) }; </script></body>The ideal seems very good, in the iframe loading process, quickly reset the iframe.src point, so that it and index.html homologous, then the index page can go to get its name value! But the reality is cruel, the IFRAME in the reality of the performance is constantly refreshed, but also very good understanding, each time the onload time triggered, reset src, equivalent to reload the page, and triggered the OnLoad event, and then constantly refreshed (but the required data can be output). The modified code is as follows:
<body> <script type= "Text/javascript" >iframe= Document.createelement (' iframe '); Iframe.style.display= ' None '; varState = 0; Iframe.onload=function() { if(state = = = 1) { vardata =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>Summarize
There are several conditions that can be used to cross domains in this way.
Learn a little bit more about window and Contentwindow. The browser creates a Window object for the original document, and then creates an additional window object for each frame (IFRAME). These additional objects are child windows of the original window and may be affected by events that occur in the original window. For example, closing the original window will cause all child windows to close. The Contentwindow property refers to the window object where the specified frame or IFRAME resides.
How to useMany people may only be concerned with the use of the method, but the principle is not cold. This method is more complex than JSONP, and it is more complicated to use.
The server typically outputs a section of JS code, such as the following:
<? PHP Echo ' <script> window.name = "{\" name\ ": \" hanzichi\ ", \" age\ ": 10}"; </script> '?>The value of the Window.name is a string, but also the data that needs to be passed to the client (of course, if there is a need for the server to process the data passed, here only for data callbacks), there is a need to parse it yourself (such as String->json data).
Index.html page, I encapsulate the method into a function:
<body> <script type= "Text/javascript" >functioncrossdomain (URL, fn) {iframe= Document.createelement (' iframe '); Iframe.style.display= ' None '; varState = 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); } //called //Server Address varurl = ' http://localhost:8080/data.php '; Crossdomain (URL,function(data) {//data processing is the value of Window.name (string) vardata =Json.parse (iframe.contentWindow.name); Console.log (data); }); </script></body>
Here is a little bit of a problem, ie compatibility (iframe under the onload IE to use attachevent, as well as JSON for IE compatibility), interested friends themselves to study (can refer to the following reference article); Proxy Agent page can not have this file, will report 404 but does not affect the function (but the path must be the same as the index page).
Another point to consider is the SRC redirect of the IFrame when the code:
iframe.contentWindow.location = ' http://localhost:81/cross-domain/proxy.html ';
At this time Iframe.src point is also the Server page, where the code if using IFRAME.SRC = ' http://localhost:81/cross-domain/proxy.html '; instead it can also output the results, smart you know the difference?
ReferenceCross-domain data acquisition with Window.name+iframe
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
