jquery - 使用 JQuery 访问由 chrome 扩展注入(inject)的 iframe

标签 jquery iframe google-chrome-extension sizzle

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

$("#divInside-iframe",iframeDocument)

尝试这样做时出现错误:

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

有趣的是,当我第一次尝试访问 iframe 内的某些内容时,会发生此错误。除非我从中间的常规页面 dom 访问某些内容,否则在后续调用中不会发生这种情况。之后错误再次重复出现一次。

像这样有趣的事情

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

作为一种解决方法!

另请注意,Jquery 代码的 sizzle 部分存在错误。

使用 Jquery 2.1.3 和 1.11.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>

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

关于jquery - 使用 JQuery 访问由 chrome 扩展注入(inject)的 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27739418/

相关文章:

jquery - 将标记映射为 Backbone.js View

jquery - 在页面 : Map invisible although present in HTML 中嵌入谷歌地图

css - 无法在 iframe 中使用 CSS '#' 符号

javascript - 为什么这个 onClick 事件在 HTML iframe 中不起作用?

javascript - Chrome 扩展 : best practise when it comes to authentication

javascript - 在 Javascript 中从本地目录读取文本文件

javascript - 在 Datebox 插件中显示周数

javascript - HTML本地存储多个键?

json - manifest.json 上的多个匹配项

jquery - 如何使用 Jquery 打破 iframe 并重定向页面