javascript - js跨域获取iframe内容 - 获取iframe的window对象




jQuery/JavaScript:访问iframe的内容 (8)

我想使用jQuery来处理iframe中的HTML。

我认为我可以通过将jQuery函数的上下文设置为iframe的文档来完成此操作,如下所示:

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

但是,这似乎并不奏效。 有点检查表明, frames['nameOfMyIframe']中的变量是undefined除非我等待iframe加载一段时间。 但是,当iframe加载变量不可访问(我得到permission denied - 类型错误)。

有没有人知道这方面的解决办法?


你有没有试过这个经典的,等待使用jQuery的内置就绪函数完成加载?

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

ķ


使用

iframe.contentWindow.document

代替

iframe.contentDocument

如果iframe src来自另一个域,您仍然可以执行此操作。 您需要将外部页面读入PHP并从您的域中回显。 喜欢这个:

iframe_page.php

<?php
    $URL = "http://external.com"

    $domain = file_get_contents($URL)

    echo $domain
?>

然后是这样的:

display_page.html

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>

以上是如何通过iframe编辑外部页面而不拒绝访问等的例子。


您可以使用window.postMessage来调用页面和他的iframe之间的函数(跨域或不域)。

Documentation

page.html中

<!DOCTYPE html>
<html>
<head>
    <title>Page with an iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'page',
        variable:'This is the page.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    function iframeReady(iframe) {
        if(iframe.contentWindow.postMessage) {
            iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
        }
    }
    </script>
</head>
<body>
    <h1>Page with an iframe</h1>
    <iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>

Iframe.html的

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

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

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

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

... 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>

我更喜欢使用其他变体进行访问。 从父母你可以访问子iframe中的变量。 $也是一个变量,您可以获得对其调用window.iframe_id.$访问权限

例如, window.view.$('div').hide() - 将id隐藏在iframe中的所有window.view.$('div').hide() '

但是,它在FF中不起作用。 为了更好的兼容性你应该使用

$('#iframe_id')[0].contentWindow.$


我认为你正在做的是受制于同一起源政策 。 这应该是您获得权限拒绝类型错误的原因。


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




same-origin-policy