JavaScript中的window.name

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/06/17/JavaScript%E4%B8%AD%E7%9A%84window-name/

摘要

本文主要讲述了：

备注
作用

正文

备注

在同一个标签页内，哪怕刷新页面、进行页面导航，window.name的值都不会丢失

示例：

foo.com/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>foo.com</h1>
    <script>
      name = 'foo.com';
      location.href = 'http://bar.com';
    </script>
  </body>
</html>

bar.com/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>bar.com</h1>
    <script>
      // foo.com
      console.log(name);
    </script>
  </body>
</html>

作用

跨源通信

考虑这样一个场景：

在foo.com/index.html中用<iframe>嵌入bar.com/bus.html
在bar.com/bus.html中请求bar.com的后端接口，请求成功后将响应体赋值给name并跳转到foo.com/bus.html
由于foo.com/index.html与foo.com/bus.html同源，因此可以通过<iframe>的contentWindow获取到bar.com的响应体