我想使用jQuery在iframe中操纵HTML。

我想我可以通过将jQuery函数的上下文设置为iframe的文档来实现这一点,比如:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

然而,这似乎不起作用。一点检查显示,帧['nameOfMyIframe']中的变量未定义,除非等待一段时间加载iframe。然而,当iframe加载时,变量是不可访问的(我得到了拒绝权限的类型错误)。

有人知道这方面的工作吗?


当前回答

我认为你所做的一切都要遵守同一原产地政策。这应该是您收到拒绝权限类型错误的原因。

其他回答

我最后在这里寻找的是一个没有jquery的iframe的内容,所以对于其他人来说,这就是:

document.querySelector('iframe[name=iframename]').contentDocument

可以使用jQuery的.contents()方法。

如果iframe与主页位于同一域,则.contents()方法也可用于获取iframe的内容文档。

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});

我觉得这样更干净:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');

我认为你所做的一切都要遵守同一原产地政策。这应该是您收到拒绝权限类型错误的原因。

我创建了一个示例代码。现在,您可以从您无法访问的不同域轻松了解iframe的内容。。我们可以访问iframe内容的相同域

我和你分享我的代码,请运行此代码检查控制台。我在控制台打印图像src。有四个iframe,两个来自同一个域,另外两个来自其他域(第三方)https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

and

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif)在控制台,也可以看到两个权限错误(2.错误:访问属性“document”的权限被拒绝

…irstChild)},contents:function(a){return m.nodeName(a,“iframe”)?a.contentDocument。。。

)它来自第三方iframe。

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
  <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe.html" name="imgbox" class="iView">

</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe2.html" name="imgbox" class="iView1">

</iframe>
<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">

</iframe>

<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">

</iframe>

<script type='text/javascript'>


$(document).ready(function(){
    setTimeout(function(){


        var src = $('.iView').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 2000);


    setTimeout(function(){


        var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);


    setTimeout(function(){


        var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);

         setTimeout(function(){


        var src = $('.iView3').contents().find("img").attr('src');
    console.log(src);
         }, 3000);


    })


</script>
</body>