跨域（3） window.name

时间：2022-03-18 14:50

window对象有一个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置。

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a  页面 </title>
</head>
<body>
     <!-- a先引用 c -->
    <iframe src="http://localhost:4000/c.html" frameborder="0"  onload="load()"  id="iframe"></iframe>
</body>
<script>
  let  first  = true;
  function load() {
      if(first) {
             //把 a 引用的地址改到b
                let  iframe =  document.getElementById(‘iframe‘)
                iframe.src= ‘http://localhost:3000/b.html‘
                first  = false
      }else {
          console.log(iframe.contentWindow.name)
      }
  }
</script>
</html>

c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //   c页面把值放到window 下
   window.name =‘hello world‘
</script>
</html>

注释：

a 和 b 是同域名的

c 是独立的

a先获取c 的数据

a先引用 c c把值放到window.name ,把 a 引用的地址改到b