当前位置:主页 > 聚焦 >

详解js中特性与作用

时间:2020-11-03 20:36:12

  早就知道window有个name属性,但是究竟干什么用的一直不知道,今天花时间好好研究测试了下,发现是个有意思的JS API属性。

  《JavaScript视频教程》

  window.name是一个所有浏览器都有的属性,表示浏览器窗口的名称,默认是一个空字符串,所有浏览器都是个空字符串。

  这是一个可读可写的属性,语法如下:

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

  例如:

  window.name = 'zhangxinxu';

  window.name的跨页面特性

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

  例如后面这个demo,您可以狠狠地点击这里:链接地址测试demo

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

  HTML代码示意如下:

  <a href="./window-name.html" onClick="window.name='zhangxinxu-1';">点击我看看目标页面的window.name</a> <a href="./window-name.html" onClick="window.name='zhangxinxu-2';">点击我看看目标页面的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就是窗口的意思,所以上面的<a>链接如果我们设置了target="_blank"新窗口打开,则目标页面的window.name就是空字符串'',因为是新的窗口,不是那个设置了window.name的窗口。

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

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

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

  然后,我要讲下问什么不展开了,因为现在使用实现跨域通信已经属于鸡肋方法了,请使用postMessage跨域跨文档通信代替,更好用更安全更强大。

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

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

  最后总结一下

  1. window.name可读可写,指支持字符串;

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

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

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

  原文地址:

  编程入门!!

热点推荐
1 KuCoin上线新代币—发财

消息,KuCoin宣布新兴项目发财已在KuCoin Alpha上线并可交易。代币:发财,交易对:发财/USDT,公...

2 俄罗斯财政部:将自5月起恢复外汇交易

消息,俄罗斯财政部宣布将自5月起恢复根据预算规则进行的外汇交易。在确定5月外汇操作规模...

3 黑石主导比特币ETF资金流入,BTC价格回升

截至4月23日,美国上市的现货比特币ETF连续第七天录得净流入,单日新增资金约3.36亿美元,七...

4 德国政府:伊朗应抓住机会与美国谈判

消息,德国政府近期连续发表以下观点:一、伊朗应抓住机会在伊斯兰堡继续与美国的谈判。...

5 Polymarket:比特币年底前触及150000美元概率

消息,预测市场显示,比特币在2026年12月31日前触及150000美元的概率为9.5%,而在2026年6月30日前...

6 德商银行:欧元区PMI引发经济衰退担忧

消息,德国商业银行指出,欧元区本月的采购经理人指数调查结果降至与经济萎缩相关的区间...

7 美国司法部启动OneCoin受害者赔偿程序

美国司法部宣布启动OneCoin加密货币诈骗案受害者的赔偿程序,现有超过4000万美元的回收资产可...

8 Robinhood 获在新加坡推出券商业务原则性批

消息,据官方公告,Robinhood 已获得新加坡金融管理局授予的原则性批准,拟在新加坡推出经纪...

9 AI交易机器人据称将200美元增至14,300美元

消息,4 月 23 日,一名Anthropic工程师开发的Polymarket交易机器人据称将200美元增至14,300美元。该...

10 受伊朗冲突影响 德国私营部门活动近一年

消息,德国4月综合PMI降至48.3,自去年5月以来首次跌破50荣枯线,显示经济陷入收缩。标普全球...

成都来彰科技 蜀ICP备2025134723号-1

资讯来源互联网,如有版权问题请联系管理员删除。