jQuery/JavaScript: iframe의 콘텐츠 액세스

jQuery를 사용하여 iframe 내부의 HTML을 조작하고 싶습니다.

jQuery 함수의 컨텍스트를 iframe의 문서로 설정하면 이 작업을 수행할 수 있을 것이라고 생각했습니다:

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

그러나 이것은 작동하지 않는 것 같습니다. 약간의 검사를 해보니 iframe이 로드될 때까지 잠시 기다리지 않는 한 frames['nameOfMyIframe']의 변수가 정의되지 않은 것으로 나타났습니다. 그러나 iframe이 로드되면 변수에 액세스할 수 없습니다(권한 거부 유형 오류가 발생함).

누구든지 이에 대한 해결 방법을 알고 있습니까?

Kaspar Lee
편집된 질문11일 9월 2016 в 3:50
프로그래밍
iframe javascript jquery same-origin-policy
13일 12월 2008 в 7:20
48 파운드
질문에 대한 의견 (5)

',' 의 경우 &lt iframe&gt 동일한 도메인에 요소는 쉽게 접근할 수 있다.

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

참조

RevanthKrishnaKumar V.
편집된 답변30일 7월 2015 в 5:51
해설 (11)
해결책

현재 수행 중인 작업은 동일 출처 정책의 적용을 받는다고 생각합니다. 이것이 권한 거부 유형 오류가 발생하는 이유 일 것입니다.

해설 (6)

'스콘텐츠 ()' jQuery 방법을 사용할 수 있습니다.

이 방법 () ',' 스콘텐츠 &gt 데에도 사용할 수 있는 경우에는 컨텐트 문서에만 내려받습니다 iframe iframe 는 같은 도메인에 있는 메인 페이지

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of ! Yay!!!');
    });
});
Narendra Jadhav
편집된 답변9일 9월 2019 в 10:12
해설 (4)

Src 가 iframe 의 경우 다른 도메인에 할 수는 있습니다. 외부 페이지 에서 해당 도메인에 PHP 와 echo 를 읽을 수 있어야 합니다. 다음과 같습니다.

iframe_page.php

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

    $domain = file_get_contents($URL)

    echo $domain
?>

그 후 이 같은 일이.

display_page.html



  Test

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

위의 예는 없이 어떻게 편집할 수 있는 등 외부 페이징할 iframe 액세스가 거부되었습니다.

해설 (13)

내가 이렇게 찾습니다찾기 클리너:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');
zupa
편집된 답변6일 1월 2017 в 12:00
해설 (1)

사용

iframe.contentWindow.document

대신

iframe.contentDocument
RevanthKrishnaKumar V.
편집된 답변30일 7월 2015 в 7:15
해설 (7)

이벤트를 iframe의 온로드 핸들러에 연결하고 그 안에서 자바스크립트를 실행하여 iframe에 액세스하기 전에 로딩이 완료되었는지 확인해야 합니다. 

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

위와 같이 하면 '아직 로드되지 않음' 문제가 해결되지만 권한과 관련하여 다른 도메인의 페이지를 iframe에서 로드하는 경우 보안 제한으로 인해 해당 페이지에 액세스할 수 없습니다.

해설 (6)

그의 iframe 사이의 함수 호출 페이지에서든 빈다우스포스트 세이지 사용할 수 있습니다 (크로스 도메인 방관하겠나).

문서용으로

  • 팔레스트믈 *



    Page with an iframe
    <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>


    <h1>Page with an iframe</h1>
  • 이프라머스트믈 *



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


    <h1>iframe</h1>
    <p>It's the iframe.</p>
Sevle
편집된 답변26일 2월 2016 в 3:38
해설 (0)

난 사용을 선호하지만 다른 변형 액세스할 수 있습니다. 부모 자식 iframe 의 액세스하도록 변수가 있을 수 있습니다. '은 변수 $' 너무 진실이며당신이 액세스하려면 농구계의 받을 수 있다. 'window.iframe_id. $'

예를 들어, '빈다우드비에웨인 $ (& # 39, div& # 39;) & # 39 의 모든 id 와 div 자히데 ()' - 숨기십시오 iframe view& # 39;;

하지만, t # 39 doesn& 작업하십시오 FF. 호환성 향상을 위해 콩지름에

'$ (& # 39, # # 39, iframe_id&) [0] 스콘텐토빈다우스 $'

jasonszhao
편집된 답변29일 12월 2013 в 10:37
해설 (0)

jQuery의 기본 제공 준비 함수를 사용하여 로드가 완료될 때까지 기다리는 고전적인 방법을 사용해 보셨나요?

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

K

해설 (1)

내가 샘플 코드 생성. 이제 다른 도메인 can& # 39 에서 t 액세스만 쉽게 이해할 수 있습니다. 내용을 iframe. 동일한 도메인에 iframe 컨텐트입니다 액세스할 수 있습니다

난 내 코드, 실행하십시오 코드를 공유할 수 있습니다 확인 콘솔이군요. 난 그림 인쇄 src dell. 콘솔이군요. 네 가지 iframe, 두 개의 동일한 도메인에 &amp iframe 에서 왔다. 다른 두 개의 다른 도메인 (제 3 자) 에서 볼 수 있는 두 개의 이미지를 지유 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 오류: # 39, & # 39 document& 액세스하려면 권한 거부됩니다 속성.

트리스타차일드)}, {반품하십시오 m. 오든임 내용: 함수 (a) (a, &quot iframe";) 앨콘텐트도쿠망스?

참조합니까 파티였죠 iframe) 가 나오고 있다.


<p>iframe from same domain</p>



<p>iframe from same domain</p>



<p>iframe from different  domain</p>




<p>iframe from different  domain</p>




<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>
해설 (0)

여기에 됐지 내가 찾고 있는 사람이 점점 컨텐트에서 않고 있으므로, 이를 위해 바로 이러한 보았으매 iframe 포함한다.

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

끝 - &lt 스니핏 >;!

해설 (0)

이 솔루션은 같은 작동됨 iFrame. 내가 스크립트입니다 hotenough. PHP 에서 다른 모든 내용을 얻을 수 있는 웹 사이트, 가장 중요한 부분은 너회가 쉽게 적용할 수 있는 사용자 정의 jQuery 를 외부 컨텐트입니다. 제발 다른 웹 사이트) 에서 얻을 수 있다 는 다음과 같은 뜻이 있다 스크립트입니다 내용을 모두 적용할 수 있습니다 다음 쿠섬 jquery / js 잘 알려져 있다. 이 내용은, 내의 어떤 페이지에서든 요소이거나 어디서든 사용할 수 있습니다.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}
해설 (0)

한층 더 받았다.

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();
  ...
}
...
해설 (0)