javascript - отключить - обход same origin policy




jQuery/JavaScript: доступ к содержимому iframe (8)

Вам нужно прикрепить событие к обработчику onload 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 из другого домена, вы не сможете получить к ней доступ из-за ограничений безопасности.

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

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

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

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

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


Вы можете использовать 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>

Для еще большей надежности:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

а также

...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );

if (frame_win) {
  $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
  ...
}
...

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

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

Reference


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


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

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

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

вместо

iframe.contentDocument




same-origin-policy