使用 JQuery 访问由 chrome 扩展注入的 iframe答案

【问题标题】：Accessing iframe injected by chrome extension using JQuery使用 JQuery 访问由 chrome 扩展注入的 iframe
【发布时间】：2015-02-28 14:57:20
【问题描述】：

您好，我正在创建一个 chrome 扩展，我在其中将 iframe 注入到某些页面中。在 iframe 的 onload 函数中，我尝试使用 Jquery 访问 iframe 中的元素。

$("#divInside-iframe",iframeDocument)

尝试这样做时出现错误：

未捕获的安全错误：无法在“EventTarget”上执行“addEventListener”：阻止了来源为“http://www.whateverpage.com”的框架访问来源为“chrome-extension://meehnkofmafeb******”的框架。请求访问的帧具有“http”协议，被访问的帧具有“chrome-extension”协议。协议必须匹配。

有趣的是，这个错误发生在我第一次尝试访问 iframe 中的内容时。它不会在后续调用中发生，除非我从中间的常规页面 dom 访问某些内容。之后错误再次重复。

一些有趣的事情

try{
    $("#divInside-iframe",iframeDocument)
}catch(error){
    $("#divInside-iframe",iframeDocument)
}

作为一种解决方法！

还请注意错误是在 Jquery 代码的嘶嘶声部分。

使用 Jquery 2.1.3 和 1.11.1 检查

【问题讨论】：

标签： jquery iframe google-chrome-extension sizzle

【解决方案1】：

这取决于您在 iFrame 中加载的内容。如果您从同一主机加载内容，则可以按以下方式完成

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>

<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>

</body>
</html>

我不确定加载的内容是否来自第三方网站。希望对你有帮助

【讨论】：

我正在加载扩展的内容。类似 [(myiFrame.src = chrome.extension.getURL('/pages/index.html')];