Detaillierte Erläuterung der Eigenschaften und Funktionen von window.name in js

Ich wusste schon lange, dass Fenster ein Namensattribut hat, aber ich wusste nie, wofür es verwendet wird. Ich habe mir heute die Zeit genommen, es zu recherchieren und zu testen, und festgestellt, dass es ein interessantes JS-API-Attribut ist.

Empfohlenes Tutorial: „JavaScript-Video-Tutorial“

Alle Browser haben einen window.name

window.name ist ein Attribut, das alle Browser haben und das den Browser angibt. Der Name des window ist standardmäßig eine leere Zeichenfolge und ist in allen Browsern eine leere Zeichenfolge. window.name是一个所有浏览器都有的属性，表示浏览器窗口的名称，默认是一个空字符串，所有浏览器都是个空字符串。

这是一个可读可写的属性，语法如下：

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

例如：

window.name = 'zhangxinxu';

window.name的跨页面特性

window.name有个很有意思的跨页面特性，具体描述为：页面如果设置了window.name，即使进行了页面跳转到了其他页面，这个window.name还是会保留。

例如后面这个demo，您可以狠狠地点击这里：window.name与链接地址测试demo

其中，页面上有两个超链接，点击超链接的时候会给当前页面的window设置name属性值:

HTML代码示意如下：

<a href="./window-name.html" onClick="window.name=&#39;zhangxinxu-1&#39;;">点击我看看目标页面的window.name</a>
<a href="./window-name.html" onClick="window.name=&#39;zhangxinxu-2&#39;;">点击我看看目标页面的window.name</a>

然后window-name.html这个页面做的事情很简单（见下面代码），就是页面加载完毕后输出此时的window.name值。

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

最后的效果如下：

• 点击第一个链接，会设置当前页面window.name='zhangxinxu-1'，此时window-name.html这个目标页面提示的信息如下图所示：

• 显示的window.name值是'zhangxinxu-1'。
  

• 此时，我们返回到来源页：

• 再点击第二个链接：

• 会发现此时目标页显示window.name值是'zhangxinxu-2'。

这个特性很有意思，居然能够记忆来源页面设置的window.name值，这个可比document.referrer还要好用，毕竟可以直接指定任意字符，而document.referrer还需要对URL进行处理。

例如上面例子，window-name.html这个页面就可以知道是从哪个链接过来的，然后根据来源不同做不同的事情，比通过URL传参要更干净更灵活也更隐秘。

新窗口打开的window.name无效

window就是窗口的意思，所以上面的<a></a>链接如果我们设置了target="_blank"新窗口打开，则目标页面的window.name就是空字符串''，因为是新的窗口，不是那个设置了window.name的窗口。

因此，window.name跨页面传递数据还是有一定限制的。

window.name与跨域与没什么卵用了

window.name的值是跟着浏览器窗体走的，因此，只要在一个窗体中，就可以共享一个值，于是可以实现跨域数据获取，这个在以前还是挺有名的一个跨域方法，名叫“window.name Transport”，有兴趣可以参考这个2008年的老文，这里不展开，这个跨域方法要比JSONP要安全些。

然后，我要讲下问什么不展开了，因为现在使用window.name

Dies Es handelt sich um ein lesbares und beschreibbares Attribut mit der folgenden Syntax: 🎜

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

🎜Zum Beispiel: 🎜rrreee🎜Cross-page feature of window.name🎜 🎜🎜 window.name verfügt über eine sehr interessante seitenübergreifende Funktion. Die spezifische Beschreibung lautet: Wenn die Seite window.name setzt, springt die Seite auch dann zu anderen Seiten, Dieser window.name bleibt weiterhin erhalten. 🎜🎜Für die folgende Demo können Sie beispielsweise hier klicken: window.name und Linkadresse Testdemo🎜🎜🎜Es gibt zwei Hyperlinks auf der Seite. Wenn auf den Hyperlink geklickt wird, wird das Fenster der aktuellen Seite auf nameAttributwert:🎜🎜<img src="https://img.php.cn/upload/image/991/972/549/1604396487428658.png" title="1604396487428658.png" alt="Detaillierte Erläuterung der Eigenschaften und Funktionen von window.name in js ">🎜🎜Der HTML-Code lautet wie folgt: 🎜rrreee🎜Dann ist die Funktion der Seite „window-name.html“ sehr einfach (siehe Code unten), nämlich die Ausgabe von <code>window.name Wert zu diesem Zeitpunkt, nachdem die Seite geladen wurde. 🎜rrreee🎜Der endgültige Effekt ist wie folgt: 🎜

• 🎜Klicken Sie auf den ersten Link und die aktuelle Seite wird festgelegtwindow.name='zhangxinxu -1' , zu diesem Zeitpunkt sind die von der Zielseite window-name.html angeforderten Informationen wie folgt: 🎜

🎜🎜

• 🎜angezeigt Der Wert von window.name ist 'zhangxinxu-1'.
  🎜
• 🎜An dieser Stelle kehren wir zur Quellseite zurück: 🎜

🎜🎜

• 🎜Klicken Nochmals zwei Links: 🎜

🎜🎜

• 🎜Sie werden feststellen, dass die Zielseite den Wert von window.nameanzeigt > ist 'zhangxinxu-2'. 🎜

🎜🎜🎜Diese Funktion ist sehr interessant. Sie kann sich tatsächlich den auf der Quellseite festgelegten Wert window.name merken. Dies ist vergleichbar mit document.referrer🎜 ist noch einfacher zu verwenden. Schließlich können Sie jedes direkt angeben Zeichen und document.referrerDie URL muss ebenfalls verarbeitet werden. 🎜🎜Im obigen Beispiel kann die Seite „window-name.html“ beispielsweise wissen, von welchem ​​Link sie stammt, und dann je nach Quelle unterschiedliche Dinge tun. Dies ist sauberer, flexibler und privater als die Übergabe von Parametern über die URL . 🎜🎜<strong>Der im neuen Fenster geöffnete Fenstername ist ungültig🎜🎜🎜<code>window bedeutet Fenster, wenn wir also den <a></a>-Link oben >Ziel festlegen ="_blank" Wenn ein neues Fenster geöffnet wird, ist der window.name der Zielseite die leere Zeichenfolge '', da es sich um ein neues Fenster handelt. nicht das. Das Fenster mit window.name gesetzt. 🎜🎜Daher bestehen für window.name immer noch gewisse Einschränkungen bei der seitenübergreifenden Datenübertragung. 🎜🎜window.name und Cross-Domain sind nutzlos🎜🎜🎜window.names Wert ist Befolgt Das Browser-Formular wird verwendet. Solange Sie sich in einem Formular befinden, können Sie einen Wert teilen, um eine domänenübergreifende Datenerfassung zu erreichen. Dies war in der Vergangenheit eine bekannte domänenübergreifende Methode, die als „Fenster“ bezeichnet wurde .name Transport“, wenn Sie interessiert sind, können Sie sich auf dieses 2008 alte Dokument beziehen Artikel🎜, der hier nicht erweitert wird. Diese domänenübergreifende Methode ist sicherer als JSONP. 🎜🎜Dann möchte ich darüber sprechen, warum die Frage nicht erweitert wird, da die Verwendung von window.name zur Erzielung einer domänenübergreifenden Kommunikation eine nutzlose Methode ist. Bitte verwenden Sie 🎜postMessage domänen- und übergreifende. Dokumentenkommunikation🎜 stattdessen einfacher zu bedienen, sicherer und leistungsfähiger. 🎜

有此看来，现在window.name这个属性已经没什么卵用了，除了上面提到了偶尔可以用来在同一窗口前后页面之间做简单的数据传递，包括JSON字符串数据。

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

最后总结一下

　1. window.name可读可写，指支持字符串；

　2. window.name的值跟着浏览器窗口走的，不是跟着页面走的；

　3. window.name没什么卵用，知道他没用就是很有用的知识。

好，就这么多，让我搞清楚了传说中的window.name到底是个什么鬼，我表示很满足。

原文地址：https://www.zhangxinxu.com/wordpress/?p=8947

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Eigenschaften und Funktionen von window.name in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!