vue中使用iframe，如何监听内部跳转？？

Question

vue组件demo，内嵌了iframe,src='www.xxx.com/aaa'

现在aaa页面内部路由跳转之后，如何在组件demo中获取到最新的跳转链接

通过监听iframe的onload事件，拿到的src始终都是www.xxx.com/aaa

Answer 1

你可以读取这个：document.getElementById("iframe").contentWindow.location.href

Answer 2

在 Vue 中使用 <iframe> 元素时，要监听内部跳转，您可以使用 load 事件来实现。这个事件会在 <iframe> 内部内容加载完成时触发。以下是一个简单的示例：

在您的 Vue 组件模板中，使用 <iframe> 并添加 @load 事件监听器：

<template>
  <div>
    <iframe
      ref="myIframe"
      src="https://www.example.com"
      @load="handleIframeLoad"
    ></iframe>
  </div>
</template>

在 Vue 组件中，编写 handleIframeLoad 方法来监听 <iframe> 内部的跳转：

<script>
export default {
  methods: {
    handleIframeLoad() {
      const iframe = this.$refs.myIframe;
      if (iframe) {
        // 获取当前 iframe 的 URL
        const iframeUrl = iframe.contentWindow.location.href;
        
        // 在这里可以根据 iframeUrl 做一些处理
        console.log('Iframe loaded:', iframeUrl);
      }
    }
  }
};
</script>

在这个示例中，当 <iframe> 内部的内容加载完成时，handleIframeLoad 方法会被调用。您可以在该方法内部获取 <iframe> 的 URL，并根据需要进行进一步的处理。

请注意，由于浏览器的同源策略限制，您只能访问与您主应用程序相同的域的 <iframe> 内部内容。如果 <iframe> 内部内容与主应用程序不在同一个域，您可能会受到安全限制。

此外，如果您需要更高级的内部通信，可能需要使用更复杂的跨窗口通信技术，如 postMessage。但对于简单的内部跳转监听，上述方法应该是足够的。

Answer 3

如果 iframe 里面的内容页面是自己开发的项目，可以在每次跳转路由时通过 window.postMessage 与父级通讯，然后父级页面直接接收新的页面URL信息 或者 父级自己通过 contentWindow 来获取。

如果 iframe 里面的内容不是自己开发的项目，也没有办法提需求让新增与父级页面的通讯功能。那么就只能通过 setInterval 定时器，定期获取获取 contentWindow 中的URL信息。