如何从具有不同来源的iframe中区分具有相同来源的iframe

Question

我的网页上有2个iframe。 iframe S 与网页的来源相同， iframe D 有不同的内容：

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

我需要只将addEventListener添加到具有相同原点的iframe上。这就是我的工作：

for (let i = 0; i < frames.length; i++) {
    const iframe = window.frames[I]
    console.log(iframe)        
    if (iframe.document.domain === window.document.domain) {
        iframe.addEventListener('message', event => {
            console.log(event.data)
        }, false)
    }
}

但是当我尝试阅读 iframe D 的iframe.document时，这会出错。

Uncaught DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.

因为，与 iframe S 不同， iframe D 为我提供此对象，当我从2个代码段尝试 console.log（iframe）时上面的代码：

正如您所看到的，没有文档属性。

Answer 1

只需使用iframe选择所有querySelectorAll，然后使用src属性构建新的URL，并检查它是否与您自己的hostname匹配。< / p>

document.querySelectorAll('iframe').forEach(frame => {
  const url = new URL(frame.src)

  if (url.hostname === window.location.hostname) {
    frame.addEventListener('message', event => {
        console.log(event.data)
    }, false)
  }
})

<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://stackoverflow.com"></iframe>
<iframe src="https://google.com"></iframe>

请注意，new URL在IE浏览器中不起作用。您必须手动拆分URL部分才能进行hostname等式检查。

Answer 2

使用 try - catch block 包装整个if语句错误，但不确定这是否是解决此问题的最佳方法。

for (let i = 0; i < frames.length; i++) {
    const iframe = window.frames[I]
    console.log(iframe)
    try {        
        if (iframe.document.domain === window.document.domain) {
            iframe.addEventListener('message', event => {
                console.log(event.data)
            }, false)
        }
    }
    catch(error) {
    }
}