Question

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

$("#divInside-iframe",iframeDocument)

尝试这样做时出现错误：

Uncaught SecurityError：无法执行＆＃39; addEventListener＆＃39;在＆＃39; EventTarget＆＃39;：阻止了一个有起源的框架＆＃34; http://www.whateverpage.com＆＃34;从访问带有起源的框架＆＃34; chrome-extension：// meehnkofmafeb ******＆＃34;。请求访问的帧具有＆＃34; http＆＃34;的协议，被访问的帧具有＆＃34; chrome-extension＆＃34;的协议。协议必须匹配。

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

像

一样有趣

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

可以解决这个问题！

另请注意，错误发生在Jquery代码的sizzle部分。

使用Jquery 2.1.3和1.11.1检查

Answer 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访问chrome扩展注入的iframe

1 个答案: