Quickly understand the characteristics and functions of window.name

1. All browsers have a window.name

window.nameIt is an attribute that all browsers have. It represents the name of the browser window. The default is an empty string, and all browsers are an empty string.

This is a readable and writable attribute, the syntax is as follows:

string = window.name;
window.name = string;

E.g:

window.name ='zhangxinxu';

Second, the cross-page characteristics of window.name

window.nameThere is a very interesting cross-page feature, which is specifically described as: If the page is set window.name, this window.namewill remain even if the page jumps to another page .

For example, the following demo, you can click here: window.name and link address test demo

Among them, there are two hyperlinks on the page. When the hyperlink is clicked, the attribute value of the current page will be windowset name:

The HTML code is as follows:

<a href="./window-name.html" onClick="window.name='zhangxinxu-1';">Click on the window.name of the target page I see</a> 
<a href="./window -name.html" onClick="window.name='zhangxinxu-2';">Click me to see the window.name of the target page</a>

Then the window-name.html page is very simple (see the code below), which is to output the window.namevalue at this time after the page is loaded .

<!-- window-name.html页面中的代码 -->
<p>window.name值是：<output id="output"></output></p>
<script>output.textContent = window.name;</script>

The final effect is as follows:

• Click the first link to set the current page window.name='zhangxinxu-1'. At this time, the window-name.html target page prompts information as shown in the figure below:

  

  The displayed window.namevalue is 'zhangxinxu-1'.

• At this point, we return to the source page:

  

  Click on the second link:

  

  You will find that the target page display window.namevalue is at this time 'zhangxinxu-2'.

  

This feature is very interesting. It can actually memorize the window.namevalue set by the source page . This is even easier to use than document.referrer . After all, you can directly specify any character and document.referreryou need to process the URL.

For example, in the above example, the window-name.html page can know from which link it came, and then do different things according to the source, which is cleaner, more flexible and more secretive than passing parameters through URL.

New window opened window.nameinvalid

windowIt means the window, so <a>if we set a target="_blank"new window to open in the above link , the target page window.nameis an empty string '', because it is a new window, not the window that was set window.name.

Therefore, window.namethere are certain restrictions on transferring data across pages.

Three, window.name and cross-domain and nothing to use

window.nameThe value of is followed by the browser window. Therefore, as long as it is in a window, you can share a value, so you can achieve cross-domain data acquisition. This is a well-known cross-domain method in the past, called "window .name Transport", if you are interested, you can refer to this old article in 2008. I will not expand it here. This cross-domain method is safer than JSONP.

Then, I’m going to talk about why I’m not going to start, because now the window.namecross-domain communication is a tasteless method, please use postMessage cross-domain and cross-document communication instead, it is better to use, safer and more powerful.

From this point of view, window.namethis attribute is not very useful now, except as mentioned above, it can be used occasionally to do simple data transfer between the front and back pages of the same window, including JSON string data.

window.name = '{ "foo": "bar" }';

Four, finally summarize

1. window.nameReadable and writable, refers to supporting strings;
2. window.nameThe value of follows the browser window, not the page;
3. window.nameIt is useless, knowing that he is useless is very useful knowledge.

Okay, that's all, let me figure out window.namewhat the ghost is in the legend , I am very satisfied.