IT박스

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

itboxs 2020. 6. 17. 19:22
반응형

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


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

정확한 질문은 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 /*, ... */);

노트

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


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

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

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

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

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);
 }

contentJS와 함께 iframe에서 사용 :

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

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

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

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

Hope that helps :)


The following code is cross-browser compliant. It works in IE7, IE8, Fx 3, Safari, and Chrome, so no need to handle cross-browser issues. Did not test in 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>

Chalkey is correct, you need to use the src attribute to specify the page to be contained in the iframe. Providing you do this, and the document in the iframe is in the same domain as the parent document, you can use this:

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

Obviously you can then do something useful with the contents instead of just putting them in an alert.

참고URL : https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript

반응형