Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use window.name in JS to achieve cross-domain data transmission". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use window.name in JS to achieve cross-domain data transmission".

I. the nature of window.name

Window.name has a wonderful property.

If the window.name is set on the page, then without closing the page

Even if the page jumps to location.href=..., the window.name will be retained.

We can do an experiment on the console:

/ / Open the browser, enter URL:www.yisu.com//F12, open the console / / enter the following in the console / / enter window.name;// return'/ / enter window.name='test';// return 'test'// input location.href=' http://www.baidu.com';// return http://www.baidu.com// input window.name;// return' test'

Taking advantage of this, we can get the data from other domains.

2. Cross-domain request

We know that using the src property of iframe, you can load web pages from different domains

We can also use $('iframe'). ContentWindow to get the window object of the page in iframe

It's just that there are very few properties that can be accessed in this window object.

/ enter Object.keys ($('iframe') .contentWindow) in the console; / / return ["postMessage", "blur", "focus", "close", "parent", "opener", "top", "length", "frames", "closed", "location", "self", "window"]

If you access other properties, an error will be reported:

Uncaught DOMException: Blocked a frame with origin "..." From accessing a cross-origin frame.

If you use iframe to load a page in the same domain, accessing the property of $('iframe') .contentWindow will not report an error, which is the complete window object of the page within the iframe.

III. Integration

Using the nature of window.name, we can load a cross-domain page in iframe.

After the page is loaded, let it set its own window.name

Then let it jump to the current page and jump to a page in the same domain as the page outside the iframe

Window.name will not change at this time.

In this way, both inside and outside iframe belong to the same domain, and window.name is still the value set by cross-domain pages.

Suppose there are three pages:

A.com/app.html: application page.

A.com/proxy.html: the proxy file, which is generally a html file without any content, needs to be in the same domain as the application page.

B.com/data.html: the page where the application page needs to obtain data, which can be called the data page.

The basic steps for implementation are as follows:

Create an iframe in the a.com/app.html and point its src to the data page (b.com/data.html).

The data page appends the data to the window.name of the iframe. The data.html code is as follows:

Window.name ='I was there trees'; / / here is the data to be transferred. The size is generally 2m under IE and firefox. The data format can be customized, such as json and string.

Listen for the onload event of the iframe in the application page (a.com/app.html), in which you set the src of the iframe to point to the agent file in the local domain (the agent file and the application page are in the same domain, so you can communicate with each other). The partial code of app.html is as follows:

Var state = 0, iframe = document.createElement ('iframe'), loadfn = function () {if (state = 1) {var data = iframe.contentWindow.name; / / read data alert (data); / / pop-up' I was there data'} else if (state = 0) {state = 1 Iframe.content_Window.location = "http://a.com/proxy.html"; / / set proxy file}}; iframe.src = 'http://b.com/data.html'; if (iframe.attachEvent) {iframe.attachEvent (' onload', loadfn);} else {iframe.onload = loadfn;} document.body.appendChild (iframe)

Destroy the iframe after getting the data, freeing up memory; this also ensures security (not being accessed by other domain frame js).

Iframe.contentWindow.[ XSS _ clean] (''); iframe.contentWindow.close (); document.body.removeChild (iframe)

To sum up, that is:

The src attribute of iframe changes from foreign domain to local domain, and cross-domain data is transferred from foreign domain to local domain by window.name of iframe. This cleverly bypasses the browser's cross-domain access restrictions, but at the same time it is a secure operation.

Thank you for reading, the above is the content of "how to use window.name in JS to achieve cross-domain data transmission". After the study of this article, I believe you have a deeper understanding of how to use window.name in JS to achieve cross-domain data transmission, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.