Javascript에서 iframe의 본문 내용을 얻는 방법은 무엇입니까?

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

내가 얻고 싶은 것은 :

test<br/>

javascript html iframe

— omg
소스

52

중요 참고 : iFrame이 도메인 간인 경우 iFrame의 컨텐츠에 접근 할 수 없습니다. 동일 출처 정책을 참조하십시오 .

— HellaMad

154

정확한 질문은 jQuery가 아닌 순수한 JavaScript로 수행하는 방법입니다.

그러나 항상 jQuery의 소스 코드에서 찾을 수있는 솔루션을 사용합니다. 기본 JavaScript의 한 줄에 불과합니다.

나에게는 최고의 읽을 쉽고도의 AFAIK iframe을 내용을 얻을 수있는 가장 짧은 방법.

먼저 iframe을 받으세요

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

그런 다음 jQuery의 솔루션을 사용하십시오.

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Internet Explorer에서도 작동 contentWindow하며 iframe개체 속성 중에이 트릭을 수행 합니다. 대부분의 다른 브라우저는 contentDocument속성을 사용 하므로이 OR 조건에서이 속성을 먼저 증명해야합니다. 설정되어 있지 않으면 시도하십시오 contentWindow.document.

iframe에서 요소 선택

그런 다음 일반적으로 다음 에서 DOM 요소를 사용 getElementById()하거나 querySelectorAll()선택할 수 있습니다 iframeDocument.

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

iframe에서 함수 호출

전역 함수, 변수 또는 전체 라이브러리 (예 :)를 호출 하는 window요소를 가져옵니다 .iframejQuery

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

노트

동일한 출처 정책 을 준수하는 경우이 모든 것이 가능합니다 .

— 알고리즘
소스

2

여기에 iframe이 정의되어 있지 않습니다. 전체 코드를 작성하거나 jQuery를 작성해서는 안됩니다

— Tarun Gupta

13

실례하지만 코드 줄은 jquery 코드에서 발췌 한 것이며 코드 블록은 내 예제 코드입니다. 나머지는 누구나 나갈 수 있어야합니다. 유일하게 누락 된 것은 변수 iframe입니다. 그리고 iframe이 어디에 있는지 또는 ID가 어떻게되는지 알 수 없습니다.

— algorhythm

5

iframe에 원격 src가있는 경우 작동하지 않는다는 경고의 맨 위에 경고를 추가 할 수 있습니까? 내가 틀렸다면, 다른 HTTP 요청을 보내지 않고 iframe 컨텐츠를 얻을 수있는 방법을 알려 주시면 감사하겠습니다 (iframe 컨텐츠를 구성하기 위해 javascript를 실행해야하며 피할 수있는 경우 두 번째 자바 스크립트 환경).

— Zackline

1

그런 경고가 있습니다. 그러나 나의 설명의 끝에서. 동일한 출처 정책을 준수해야합니다. 그게 다야.

— algorhythm

2

위의 작업을 수행하려면 document.querySelector('#id_description_iframe').onload = function() {... 누군가에게 도움이되기를 바랍니다.

— user3442612

71

JQuery를 사용하여 다음을 시도하십시오.

$("#id_description_iframe").contents().find("body").html()

— 마이클 아데 다요
소스

27

"도메인, 프로토콜 및 포트가 일치해야 하기 때문에 작동하지 않습니다 ." : 안전하지 않은 자바 스크립트가 URL에 액세스 프레임에 시도

— Ionică Bizău에게

2

언급했듯이 도메인이 일치하면 작동합니다. 참고로, $ ( "# id_description_iframe #id_of_iframe_body"). html ()은 Chrome에서는 작동하지만 모든 파이어 폭스 버전에서는 작동하지 않으므로 위의 방법을 사용하는 것이 좋습니다. 즉 $ ( "# id_description_iframe #id_of_iframe_body"). contents (). find ( "body"). html () 둘 다에서 작동했습니다

— hobailey

41

그것은 나를 위해 완벽하게 작동합니다.

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

— bizzr3
소스

3

이상하지만 저에게는 효과 .body가 없습니다. 그러나 .getElementsByTagName('body')[0]그렇지 않습니다.

— Jenny O'Reilly

".body"가 아니라 "body"입니다. 점 제거

— Arjun

1

당신이 바닐라 자바 스크립트에 있다면 이것이 답이되어야합니다.

— Jovanni G

23

AFAIK, Iframe은 그런 식으로 사용할 수 없습니다. src 속성이 다른 페이지를 가리켜 야합니다.

평면 오래된 자바 스크립트를 사용하여 본문 내용을 얻는 방법은 다음과 같습니다. 이것은 IE와 Firefox에서 모두 작동합니다.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

— 호세 바실리오
소스

1

그것은 사파리 (즉 지점)

— 안드레이 크리스티안 프로 단

도메인 간 문제가 발생하여 출처 " someOther.com "이 있는 프레임 이 교차 출처 프레임에 액세스하지 못하도록 차단했습니다 .

— lannyf

10

contentJS와 함께 iframe에서 사용 :

document.getElementById('id_iframe').contentWindow.document.write('content');

— 웹 사이트
소스

5

태그 사이에 텍스트를 배치하면 iframe을 처리 할 수없는 브라우저 용으로 예약되어 있다고 생각합니다.

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

'src'속성을 사용하여 iframe html의 소스를 설정하십시오 ...

희망이 있습니다 :)

3

다음 코드는 브라우저 간 호환됩니다. IE7, IE8, Fx 3, Safari 및 Chrome에서 작동하므로 브라우저 간 문제를 처리 할 필요가 없습니다. IE6에서 테스트하지 않았습니다.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

— 넥노
소스

아래 HTML은 Mac의 Chrome 7에서 효과적이었습니다. Windows의 Chrome 6 에서이 원본 게시물을 테스트했으며 정상적으로 작동했습니다. <html> <head> </ head> <body> <iframe id = "iframeId"name = "iframeId"> ... </ iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> 테스트 </ h1>"; } </ script> </ body> </ html>

— nekno

1

window.frames.iframeId.document나를 위해 정의되지 않았습니다. (우분투 13.04, 크롬)

— Ionică Bizău

2

Chalkey가 정확합니다. src 속성을 사용하여 iframe에 포함될 페이지를 지정해야합니다. 이 작업을 제공하면 iframe의 문서가 상위 문서와 동일한 도메인에 있습니다.

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

분명히 경고에 넣는 대신 내용으로 유용한 것을 할 수 있습니다.

— 그레이엄 클라크
소스

1

javascript에서 본문 내용을 얻으려면 다음 코드를 시도했습니다.

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

여기서 "id_description_iframe"은 iframe의 ID입니다. 이 코드는 나를 위해 잘 작동합니다.

— 수 낙시
소스

2

코드 붙여 넣기 대신 항상 문맥에 답하십시오. 자세한 내용은 여기 를 참조하십시오.

— gehbiszumeis

1

코드 전용 답변은 품질이 낮은 것으로 간주됩니다. 코드의 기능과 문제 해결 방법에 대한 설명을 제공하십시오. 게시물에 더 많은 정보를 추가 할 수 있다면 asker와 향후 독자 모두에게 도움이됩니다. : 전체 코드 기반의 답변 설명하면서 참조 meta.stackexchange.com/questions/114762/...

— borchvm을