js中window.top, self, parent之间的关系

最新推荐文章于 2024-01-31 10:54:31 发布

缘_妙不可言

最新推荐文章于 2024-01-31 10:54:31 发布

阅读量364

点赞数

分类专栏： js模块功能文章标签： javascript js html window vue

本文链接：https://blog.csdn.net/joy1793/article/details/119242110

版权

js模块功能专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目场景：

准备3个html页面，层级结构是 a.html <= b.html , <= c.html
a.html是最顶层父页面

问题描述：

a.html 中引入 b.html

<body>
  <iframe src="./b.html" frameborder="0" class="son" id="son1"></iframe>
</body>

a.html中定义变量aaaa=1

<script type="text/javascript">
  window.aaaa = 1
  console.log(top);
  console.log(window);
  console.log(window.top);
  console.log(window.self);
  console.log(window.parent);
  console.log(parent);
  console.log("-=-=-=-=-=-=-=-=-=-=-=-=");
</script>

b.html 中引入 c.html

<body>
  <iframe src="./c.html" frameborder="0" class="son" id="son2"></iframe>
</body>

b.html中定义变量aaaa=2

<script type="text/javascript">
  window.aaaa = 2
  console.log(top);
  console.log(window);
  console.log(window.top);
  console.log(window.self);
  console.log(window.parent);
  console.log(parent);
  console.log("-=-=-=-=-=-=-=-=-=-=-=-=");
</script>

c.html 中定义变量aaaa=3

<script type="text/javascript">
  window.aaaa = 3
  console.log(top);
  console.log(window);
  console.log(window.top);
  console.log(window.self);
  console.log(window.parent);
  console.log(parent);
  console.log("-=-=-=-=-=-=-=-=-=-=-=-=");
</script>

最终输出结果：

a.html中

<script type="text/javascript">
  window.aaaa = 1
  console.log(top);    //aaaa = 1
  console.log(window);    //aaaa = 1
  console.log(window.top);    //aaaa = 1
  console.log(window.self);    //aaaa = 1
  console.log(window.parent);    //aaaa = 1
  console.log(parent);    //aaaa = 1
  console.log("-=-=-=-=-=-=-=-=-=-=-=-=");
</script>

在最顶层a.html中所有window对象中顶层的aaaa都等于1

b.html中

<script type="text/javascript">
  window.aaaa = 2
  console.log(top);    //aaaa = 1
  console.log(window);    //aaaa = 2
  console.log(window.top);    //aaaa = 1
  console.log(window.self);    //aaaa = 2
  console.log(window.parent);    //aaaa = 1
  console.log(parent);    //aaaa = 1
  console.log("-=-=-=-=-=-=-=-=-=-=-=-=");
</script>

在b.html中单独window对象和window.self指向了b.html本身的window 对象，其余的top parent指向了父级window

c.html中

<script type="text/javascript">
  window.aaaa = 3
  console.log(top);    //aaaa = 1
  console.log(window);    //aaaa = 3
  console.log(window.top);    //aaaa = 1
  console.log(window.self);    //aaaa = 3
  console.log(window.parent);    //aaaa = 2
  console.log(parent);    //aaaa = 2
  console.log("-=-=-=-=-=-=-=-=-=-=-=-=");
</script>

在c.html中单独window对象和window.self 依然指向了c.html本身的window 对象。
top 和window.top 指向了最顶层的a.html。
window.parent parent指向了b.html。

所有在iframe中，
window和window.self 最终都是指向自己本身拥有的window。
top和window.top 都是指向最顶层的window，最开始的window。
parent和window.parent 指向本级window的父window，不会指向最开始的祖先window。