我无法正确访问 IFRAME 标签内的元素

Question

面对这样的问题。我正在为一项服务的后端创建扩展。需要将一页的信息整合到另一页。我决定使用 IFRAME 标签访问页面，通过 ID 从那里获取表格，并将该表格的数据集成到第一个表格中。这是代码。

let bonustable = document.getElementById('bonustable')
let iframe = document.createElement('iframe')
iframe.src = 'somepage.html'
bonustable.before(iframe)
iframe.contentWindow.onload = () => {
    console.log('frame is loaded')
    let table = iframe.contentDocument.getElementById('transactions-grid')
    console.log(table)
  }

我希望在控制台的“transactions-grid”元素中看到所有内部 HTML，但我没有看到。只有开始和结束标签。尽管 innerText 中有一堆 TD 标签需要访问。 我试过了

table = window.frames['ifr'].contentDocument.getElementById('transactions-grid').getElementsByTagName('td')[0] 

但这返回未定义。你能告诉我为什么会这样吗？

Answer 1

您可能面临同源策略问题。同源策略是 Web 浏览器实现的一项安全功能，可防止网页访问来自不同来源的内容。源由方案、域名和端口号组成。如果父页面的来源和 iframe 内的内容不匹配，您可能无法访问 iframe 的内容。

要检查这是否是问题所在，您可以尝试使用

postMessage()

方法访问 iframe 内容。此方法允许窗口/框架之间的跨域通信。可以给父窗口添加事件监听器，使用

postMessage()

方法发送消息，消息中包含要访问iframe内容的元素的ID。在 iframe 内容中，你可以添加一个事件监听器来接收消息，并使用接收到的 ID 来访问元素。

举个例子：

// Parent window
let iframe = document.createElement('iframe')
iframe.src = 'somepage.html'
document.body.appendChild(iframe)

window.addEventListener('message', event => {
if (event.origin !== 'https://www.somepage.com') return // replace with the origin of the iframe content
let element = iframe.contentDocument.getElementById(event.data)
// do something with the element
})

// Iframe content
window.addEventListener('message', event => {
if (event.origin !== 'https://www.parentpage.com') return // replace with the origin of the parent window
let element = document.getElementById(event.data)
// do something with the element
})

在这个例子中，父窗口监听消息并检查消息的来源是否与 iframe 内容的来源相匹配。如果是，它会使用收到的 ID 访问 iframe 内容中的元素。 iframe 内容侦听消息并检查消息的来源是否与父窗口的来源匹配。如果是，它会使用收到的 ID 访问父窗口中的元素。

请注意，您需要将示例代码中的来源替换为父窗口和 iframe 内容的实际来源。