JQuery / JavaScript: доступ к содержимому iframe - PullRequest
Новая
       84

JQuery / JavaScript: доступ к содержимому iframe

755 голосов
/ 13 декабря 2008

Я хотел бы манипулировать HTML внутри iframe, используя jQuery.

Я думал, что смогу сделать это, установив контекст функции jQuery как документ iframe, что-то вроде: 

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

Однако, похоже, это не работает. Немного осмотра показывает, что переменные в frames['nameOfMyIframe'] равны undefined, если только я не подожду, пока загрузится iframe. Однако, когда iframe загружает, переменные не доступны (я получаю ошибки permission denied -типа).

Кто-нибудь знает обходной путь к этому?

Ответы [ 14 ]

960 голосов
/ 28 октября 2009

Если <iframe> из того же домена, элементы легко доступны как 

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

Ссылка

369 голосов
/ 13 декабря 2008

Я думаю, что то, что вы делаете, подчиняется той же политике происхождения . Это должно быть причиной, по которой вы получаете ошибки типа «отказано в разрешении» ошибки.

79 голосов
/ 02 апреля 2010 
$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});
41 голосов
/ 27 июня 2010

Если 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 без доступа и т.д. ...

30 голосов
/ 02 декабря 2010

Используйте 

iframe.contentWindow.document

вместо 

iframe.contentDocument
29 голосов
/ 03 августа 2012

Я нахожу этот способ чище: 

var $iframe = $("#iframeID").contents();
$iframe.find('selector');
26 голосов
/ 13 декабря 2008

Вам необходимо прикрепить событие к обработчику загрузки iframe и выполнить там js, чтобы убедиться, что iframe завершил загрузку, прежде чем получить к нему доступ. 

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

Вышеприведенное решение решит проблему «еще не загружен», но в том, что касается разрешений, если вы загружаете страницу в iframe из другого домена, вы не сможете получить к ней доступ из-за ограничения безопасности.

19 голосов
/ 02 февраля 2014

Вы можете использовать window.postMessage для вызова функции между страницей и его iframe (кросс-домен или нет).

Документация

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>
4 голосов
/ 02 сентября 2012

Я предпочитаю использовать другой вариант для доступа. Из parent вы можете получить доступ к переменной в дочернем iframe. $ также является переменной, и вы можете получить доступ к ее простому вызову window.iframe_id.$

Например, window.view.$('div').hide() - скрыть все div в iframe с идентификатором 'view'

Но в FF это не работает. Для лучшей совместимости вы должны использовать

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

2 голосов
/ 24 сентября 2015

Я создаю пример кода. Теперь вы можете легко понять из другого домена, к которому у вас нет доступа содержимое 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 Ошибка: в доступе отказано в доступе к свойству 'document'

... irstChild)}, содержимое: 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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...