JS中top的作用深入剖析

什么是top

top 是一个全局对象，它表示当前窗口的顶层进行上下文，通常指浏览器的最顶层窗口即顶层窗口对象。

在浏览器环境中，可以通过访问 top 对象来操作浏览器窗口，比如通过 top.location 属性获取当前窗口的 URL、通过 top.open() 方法打开新的浏览器窗口等。

top 对象通常被用来处理跨域问题，可以在一个单独的浏览器窗口或标签页中打开需要跨域的网页，并且跨域的网页可以访问 top 对象中的信息。

top的应用场景

获取顶层窗口的位置

通过 top 对象获取顶层窗口的位置。

const topWindowLocation = top.window.screenLeft + ',' + top.window.screenTop;
console.log(topWindowLocation);

上述代码中，top.window.screenLeft 和 top.window.screenTop 分别获取了最顶层窗口的左边和上边相对于屏幕的距离，通过字符串拼接得到了顶层窗口的位置。

跨域通信

使用 top 尝试进行浏览器窗口的跨域通信。

假设当前网页的域名为 example.com，在一个新的浏览器窗口中打开了另外一个域名为 example.net 的网页，可以通过在 example.net 网页中访问 top 对象中的信息来实现跨域通信。

// example.com
// 将数据传递给 example.net 网页

const data = { name: 'Jack', age: 20 };
top.postMessage(data, 'https://example.net');

// example.net
// 监听 example.com 传递的数据

function receiveData(event) {
  if (event.origin !== 'https://example.com') {
    return;
  }

  const data = event.data;
  console.log(data);
}

window.addEventListener('message', receiveData);

上述代码中，example.com 网页中通过 top.postMessage() 方法向 example.net 网页传递了数据，并指定了目标网页的地址为 https://example.net。example.net 网页中监听 message 事件，并通过事件对象的 origin 属性判断消息来源的地址是否为 https://example.com，如果是则将传递过来的数据打印出来。

小结

top 是一个非常重要的全局对象，它提供了很多 API 与属性，可以用来操作最顶层的浏览器窗口。在浏览器中，它也通常用于解决跨域问题，通过在不同窗口之间传递信息，来实现不同窗口之间的通信。