js에서 window.name의 특징과 기능에 대한 자세한 설명

창에 이름 속성이 있다는 것은 오랫동안 알고 있었지만 그것이 어떤 용도로 사용되는지는 전혀 몰랐습니다. 오늘 시간을 내어 조사하고 테스트한 결과 흥미로운 JS API 속성이라는 것을 알게 되었습니다.

추천 튜토리얼: "JavaScript 비디오 튜토리얼"

모든 브라우저에는 window.name이 있습니다

window.name은 모든 브라우저가 가지고 있는 속성으로, 브라우저를 나타냅니다. window는 기본적으로 빈 문자열이며 모든 브라우저에서 빈 문자열입니다. 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>链接如果我们设置了target="_blank"新窗口打开，则目标页面的window.name就是空字符串''，因为是新的窗口，不是那个设置了window.name的窗口。

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

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

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

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

이것 다음 구문을 사용하여 읽고 쓸 수 있는 속성입니다. 🎜

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

🎜예: 🎜rrreee🎜window.name의 페이지 간 기능🎜 🎜🎜 window.name에는 매우 흥미로운 페이지 간 기능이 있습니다. 구체적인 설명은 다음과 같습니다. 페이지가 window.name으로 설정된 경우 페이지가 다른 페이지로 이동하더라도 마찬가지입니다. 페이지에서 이 < code>window.name은 계속 유지됩니다. 🎜🎜예를 들어 다음 데모를 보려면 여기를 클릭하세요: window.name 및 링크 주소 테스트 데모🎜🎜🎜페이지에 하이퍼링크가 2개 있습니다. 하이퍼링크를 클릭하면 현재 페이지의 창이 이름<으로 설정됩니다. /code >속성값:🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/991/972/549/1604396487428658.png" class="lazy" title="1604396487428658.png" alt="js에서 window.name의 특징과 기능에 대한 자세한 설명 "/ >🎜🎜HTML 코드는 다음과 같습니다. 🎜rrreee🎜그러면 window-name.html 페이지가 수행하는 작업은 매우 간단합니다(아래 코드 참조). <code>window.name을 출력하는 것입니다. 페이지가 로드된 후 이 시점의 값입니다. 🎜rrreee🎜최종 효과는 다음과 같습니다: 🎜

• 🎜첫 번째 링크를 클릭하면 현재 페이지가 설정됩니다window.name='zhangxinxu-1 ' 이때 window-name.html 대상 페이지에서 표시되는 정보는 아래와 같습니다. 🎜

🎜🎜

• 🎜표시된 window.name의 값은 'zhangxinxu-1'입니다.
  🎜
• 🎜이 시점에서 소스 페이지로 돌아갑니다: 🎜

🎜🎜

• 🎜클릭 다시 두 개의 링크: 🎜

🎜🎜

• 🎜대상 페이지에 window.name</code의 값이 표시되는 것을 확인할 수 있습니다. >은 <code>'zhangxinxu-2'입니다. 🎜

🎜🎜🎜이 기능은 매우 흥미롭습니다. 실제로 소스 페이지에 설정된 window.name 값을 기억할 수 있습니다. 이는 document.referrer🎜는 사용하기가 훨씬 쉽습니다. 결국, 원하는 항목을 직접 지정할 수 있습니다. 문자 및 document.referrerURL도 처리해야 합니다. 🎜🎜예를 들어 위의 예에서 window-name.html 페이지는 해당 링크가 어떤 링크에서 왔는지 알 수 있으며, 다른 소스에 따라 다른 작업을 수행합니다. 이는 URL을 통해 매개변수를 전달하는 것보다 더 깔끔하고 유연하며 더 비공개적입니다. . 🎜🎜새 창에서 열린 window.name이 유효하지 않습니다🎜🎜🎜window는 창을 의미하므로 >target 위에 <a> 링크를 설정하면 ="_blank" 새 창이 열리면 대상 페이지의 window.name은 새 창이므로 빈 문자열 ''입니다. window.name이 설정된 창은 아닙니다. 🎜🎜따라서 window.name에는 페이지 간 데이터 전송에 여전히 특정 제한 사항이 있습니다. 🎜🎜window.name 및 크로스 도메인은 쓸모가 없습니다🎜🎜🎜window.name의 값은 다음과 같습니다. 브라우저 양식을 사용하므로 양식에 있는 한 값을 공유할 수 있으므로 크로스 도메인 데이터 수집을 달성할 수 있습니다. 이는 과거에 "창"이라고 불리는 잘 알려진 크로스 도메인 방법이었습니다. .name Transport", 관심이 있으시면 2008년 이전 내용을 참조하세요. 기사🎜는 여기에서 확장되지 않습니다. 이 교차 도메인 방법은 JSONP보다 안전합니다. 🎜🎜그럼 질문이 확장되지 않는 이유에 대해 이야기하고 싶습니다. 이제 window.name을 사용하여 도메인 간 통신을 달성하는 것은 쓸모없는 방법이기 때문입니다. 🎜postMessage 크로스 도메인 및 크로스-도메인을 사용하세요. 문서통신🎜 대신, 더 사용하기 쉽고, 더 안전하고, 더 강력합니다. 🎜

有此看来，现在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

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

위 내용은 js에서 window.name의 특징과 기능에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!