监听子iframe的url变化

要监听子iframe的url变化，需要使用window.addEventListener('message', listener)方法。具体步骤如下：

1. 在父窗口中，使用iframe标签嵌入子窗口，并为iframe标签添加一个id属性，例如：id="myIframe"。

2. 在父窗口中，添加以下代码监听子窗口的url变化：

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://子窗口的域名') return; // 验证消息来源
  if (event.data.type === 'urlChanged') {
    var newUrl = event.data.url;
    // 处理新的url
  }
});

3. 在子窗口中，添加以下代码发送url变化事件：

window.addEventListener('hashchange', function() {
  var url = window.location.href;
  parent.postMessage({
    type: 'urlChanged',
    url: url
  }, 'http://父窗口的域名');
});

注意：在以上代码中，父窗口和子窗口都需要验证消息来源，以防止恶意攻击。同时，父窗口和子窗口的域名需要匹配。

相关问题

<iframe :src="iframeUrl" frameborder="0" width="100%" height= "90%" @load="loadFrame(this)"></iframe>怎么监听iframe上面的src的链接变化

你可以使用window.addEventListener来监控iframe的链接变化，具体的实现可以参考下面的代码：

let iframe = document.querySelector('iframe');
iframe.addEventListener('load', function() {
  let iframeWindow = iframe.contentWindow;
  iframeWindow.addEventListener('hashchange', function() {
    let newUrl = iframeWindow.location.href;
    console.log('The new URL is ' + newUrl);
  });
});

这段代码会在iframe加载完成后，监听iframe中的window对象的hashchange事件，当iframe中的链接发生变化时，会打印出新的链接。你可以根据自己的需要，在事件处理程序中进行相应的操作。

iframe单独监听sessionStorage中的某个属性

要在iframe中单独监听sessionStorage中的特定属性，你可以使用`window.addEventListener`来监听`storage`事件，并在事件处理程序中检查sessionStorage中的属性变化。

以下是一个示例：

window.addEventListener('storage', function(event) {
  if (event.storageArea === sessionStorage && event.key === 'yourKey') {
    // 处理sessionStorage中yourKey属性的变化逻辑
    var newValue = event.newValue; // 新值
    var oldValue = event.oldValue; // 旧值
    var url = event.url; // 触发该事件的页面URL
    // 其他逻辑...
  }
});

在上述代码中，我们首先检查`event.storageArea`是否为sessionStorage，然后使用`event.key`来检查特定的属性名（例如'yourKey'）。如果匹配成功，你可以在处理程序中编写逻辑来处理变化。

需要注意的是，当在同一个浏览器标签页中进行sessionStorage的操作时，不会触发storage事件。storage事件只会在同一域名下的不同标签页或不同窗口之间共享数据时触发。

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