Vue之在iframe标签里刷新外部页面

黎明晓月2024-01-31 9:38

Vue之在iframe标签里刷新外部页面

在一个 <iframe> 中刷新外部页面可以通过以下几种方式实现：

1. 使用 window.top.location.reload()

你可以在 <iframe> 中通过 window.top 访问最顶层的 window 对象，然后调用其 location.reload() 方法来刷新外部页面。

javascript 复制代码

 // 在 iframe 中
window.top.location.reload();

这将导致包含 <ifram> 的整个页面被刷新。

2. 使用 parent.location.reload()

如果<iframe> 是直接嵌套在父窗口中，你也可以使用 window.parent 来访问父窗口的 window 对象，并调用其 location.reload() 方法。

javascript 复制代码

// 在 iframe 中
window.parent.location.reload();

3. 通过向外部窗口发送消息触发刷新：

你可以通过 postMessage 向外部窗口发送消息，然后在外部窗口中监听该消息，并在接收到消息时执行刷新操作。
在<iframe> 中：

javascript 复制代码

// 在 iframe 中发送刷新消息
window.parent.postMessage('refresh', '*');

在外部窗口中：

javascript 复制代码

// 监听来自 iframe 的消息
window.addEventListener('message', (event) => {
  if (event.source === iframe.contentWindow && event.data === 'refresh') {
    location.reload();
  }
});

请注意，使用 postMessage 时，最好将 '*' 替换为确切的目标窗口的 origin，以提高安全性。

选择哪种方法取决于你的具体需求和页面结构。

详细学习iframe：

https://blog.csdn.net/m0_58293192/article/details/128343967