使用 JQuery 访问由 chrome 扩展注入的 iframe
Posted
技术标签:
【中文标题】使用 JQuery 访问由 chrome 扩展注入的 iframe【英文标题】：Accessing iframe injected by chrome extension using JQuery 【发布时间】：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 检查
【问题讨论】：
【参考方案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/" id="frameDemo"></iframe>
<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>
</body>
</html>
我不确定加载的内容是否来自第三方网站。希望对你有帮助
【讨论】：
我正在加载扩展的内容。类似 [(myiFrame.src = chrome.extension.getURL('/pages/index.html')];以上是关于使用 JQuery 访问由 chrome 扩展注入的 iframe的主要内容，如果未能解决你的问题，请参考以下文章
当使用带有各种脚本的 Google Chrome 扩展注入 HTML 模板时，jQuery 似乎没有导入