js中window.name的特性與作用是什么

js中window.name的特性與作用是什么？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

早就知道window有個name屬性，但是究竟干什么用的一直不知道，今天花時間好好研究測試了下，發(fā)現(xiàn)是個有意思的JS API屬性。

所有瀏覽器都有個window.name

window.name是一個所有瀏覽器都有的屬性，表示瀏覽器窗口的名稱，默認(rèn)是一個空字符串，所有瀏覽器都是個空字符串。

這是一個可讀可寫的屬性，語法如下：

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

例如：

window.name = 'zhangxinxu';

window.name的跨頁面特性

window.name有個很有意思的跨頁面特性，具體描述為：頁面如果設(shè)置了window.name，即使進(jìn)行了頁面跳轉(zhuǎn)到了其他頁面，這個window.name還是會保留。

例如后面這個demo，您可以狠狠地點(diǎn)擊這里：window.name與鏈接地址測試demo

其中，頁面上有兩個超鏈接，點(diǎn)擊超鏈接的時候會給當(dāng)前頁面的window設(shè)置name屬性值:

HTML代碼示意如下：

<a href="./window-name.html" onClick="window.name='zhangxinxu-1';">點(diǎn)擊我看看目標(biāo)頁面的window.name</a>
<a href="./window-name.html" onClick="window.name='zhangxinxu-2';">點(diǎn)擊我看看目標(biāo)頁面的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>

最后的效果如下：

• 點(diǎn)擊第一個鏈接，會設(shè)置當(dāng)前頁面window.name='zhangxinxu-1'，此時window-name.html這個目標(biāo)頁面提示的信息如下圖所示：

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

• 此時，我們返回到來源頁：

• 再點(diǎn)擊第二個鏈接：

• 會發(fā)現(xiàn)此時目標(biāo)頁顯示window.name值是'zhangxinxu-2'。

這個特性很有意思，居然能夠記憶來源頁面設(shè)置的window.name值，這個可比document.referrer還要好用，畢竟可以直接指定任意字符，而document.referrer還需要對URL進(jìn)行處理。

例如上面例子，window-name.html這個頁面就可以知道是從哪個鏈接過來的，然后根據(jù)來源不同做不同的事情，比通過URL傳參要更干凈更靈活也更隱秘。

新窗口打開的window.name無效

window就是窗口的意思，所以上面的<a>鏈接如果我們設(shè)置了target="_blank"新窗口打開，則目標(biāo)頁面的window.name就是空字符串''，因為是新的窗口，不是那個設(shè)置了window.name的窗口。

因此，window.name跨頁面?zhèn)鬟f數(shù)據(jù)還是有一定限制的。

window.name與跨域與沒什么卵用了

window.name的值是跟著瀏覽器窗體走的，因此，只要在一個窗體中，就可以共享一個值，于是可以實現(xiàn)跨域數(shù)據(jù)獲取，這個在以前還是挺有名的一個跨域方法，名叫“window.name Transport”，有興趣可以參考這個2008年的老文，這里不展開，這個跨域方法要比JSONP要安全些。

然后，我要講下問什么不展開了，因為現(xiàn)在使用window.name實現(xiàn)跨域通信已經(jīng)屬于雞肋方法了，請使用postMessage跨域跨文檔通信代替，更好用更安全更強(qiáng)大。

有此看來，現(xiàn)在window.name這個屬性已經(jīng)沒什么卵用了，除了上面提到了偶爾可以用來在同一窗口前后頁面之間做簡單的數(shù)據(jù)傳遞，包括JSON字符串?dāng)?shù)據(jù)。

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

最后總結(jié)一下

　1. window.name可讀可寫，指支持字符串；

　2. window.name的值跟著瀏覽器窗口走的，不是跟著頁面走的；

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

好，就這么多，讓我搞清楚了傳說中的window.name到底是個什么鬼，我表示很滿足。

感謝各位的閱讀！看完上述內(nèi)容，你們對js中window.name的特性與作用是什么大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。