iframe内部监听外部数据变化

在iframe内部监听外部数据变化，你需要使用postMessage进行跨文档通信。postMessage是一种安全的跨域通信方式，可以在不同的窗口或iframe之间传递消息。

在父页面中，可以使用postMessage发送消息给iframe：

const iframe = document.getElementById('your-iframe-id');
iframe.contentWindow.postMessage('message', '*');

在iframe内部，可以通过监听message事件来接收消息：

window.addEventListener('message', event => {
  // 处理接收到的消息
});

然后，你可以在message事件的处理函数中处理接收到的消息，并更新相关的数据。

请注意，在使用postMessage时，需要确保父页面和iframe之间有相应的域名配置，否则会触发跨域安全策略限制。

希望对你有所帮助！如果还有其他问题，请随时提问。

相关问题

<iframe>标签内部无法监听到vuex数据变化

你可以尝试使用Vue的watch属性来监听Vuex数据的变化。在Vue组件中，通过使用`$store.watch`方法来监听Vuex的状态变化。例如：

export default {
  created() {
    this.$store.watch(
      () => this.$store.state.yourVuexState,
      () => {
        // 处理数据变化的逻辑
      }
    );
  },
};

在上述代码中，将`yourVuexState`替换为你要监听的具体Vuex状态的名称。每当该状态发生变化时，`() => { // 处理数据变化的逻辑 }`中的代码会被执行。

请确保在组件创建时调用了`created()`方法来添加这个监听器，并在组件销毁时使用`this.$store.unwatch()`方法来取消监听，以避免内存泄漏。

希望这能帮到你！如果还有其他问题，请随时提问。

监听iframe路由变化

要监听一个 `iframe` 的路由变化，可以使用 `window.onhashchange` 事件和 `window.location.hash` 属性。当 `iframe` 的路由发生变化时，会触发 `window.onhashchange` 事件，我们可以在事件处理程序中获取 `iframe` 的当前路由信息。

以下是一个示例代码，假设我们有一个 `iframe` 元素的 `id` 是 `myFrame`：

// 获取 iframe 对象
var myFrame = document.getElementById('myFrame');
// 监听 window.onhashchange 事件
window.onhashchange = function() {
  // 获取 iframe 当前的路由信息
  var iframeHash = myFrame.contentWindow.location.hash;
  console.log('iframe 路由变化：', iframeHash);
};

在上面的代码中，我们获取了 `myFrame` 元素的对象，并监听了 `window.onhashchange` 事件。当事件触发时，我们通过 `myFrame.contentWindow.location.hash` 获取了 `iframe` 内部的路由信息，并将其打印到控制台上。

需要注意的是，如果 `iframe` 的源与主页面的源不同，那么在监听 `iframe` 的路由变化时，需要处理跨域访问限制的问题。