iFrame 내에서 요소 가져 오기

당신 <div>은 내에서 어떻게 얻 <iframe>습니까?

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

더 간단하게 작성할 수 있습니다.

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

첫 번째 유효한 내부 문서가 반환됩니다.

내부 문서를 받으면 현재 페이지의 모든 요소에 액세스하는 것과 같은 방식으로 내부 문서에 액세스 할 수 있습니다. ( innerDoc.getElementById... 등)

중요 : iframe이 동일한 도메인에 있는지 확인하십시오. 그렇지 않으면 내부에 액세스 할 수 없습니다. 크로스 사이트 스크립팅입니다.

iframe 이로드 된 후 액세스하는 것을 잊지 마십시오 . jQuery가없는 오래되었지만 안정적인 방법 :

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() 페이지 내부의 기능이며 그 기능 동작

위의 답변은 Javscript를 사용하여 좋은 해결책을 제시했습니다. 간단한 jQuery 솔루션은 다음과 같습니다.

$('#iframeId').contents().find('div')

여기서 요점은 jQuery의 .contents()메소드인데, .children()HTML 요소 만 가져올 수있는 것과 달리 .contents()텍스트 노드와 HTML 요소를 모두 얻을 수 있습니다. 그래서 iframe을 사용하여 iframe의 문서 내용을 얻을 수 있습니다.

jQuery에 대한 추가 정보 .contents(): .contents ()

참고 iframe이 페이지가 같은 도메인에있을 필요가있다.

다른 답변들 중 어느 것도 나를 위해 일하지 않았습니다. 내 iframe 내에서 찾고있는 객체를 반환하는 함수를 만들었습니다.

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

그런 다음 해당 함수를 호출하여 요소를 검색하십시오.

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();

iframe이 동일한 도메인에 있지 않아 상위에서 내부에 액세스 할 수 없지만 iframe의 소스 코드를 수정할 수있는 경우 iframe에 표시된 페이지를 수정하여 상위 창에 메시지를 보낼 수 있습니다. 페이지간에 정보를 공유 할 수 있습니다. 일부 출처 :

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• HTML5-크로스 브라우저 Iframe 포스트 메시지-자식에서 부모로?
• 자식에서 부모로 교차 사이트 iframe postMessage

아래 코드는 iframe 데이터를 찾는 데 도움이됩니다.

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;