iFrame 내에서 요소 가져오기

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의 내부에 액세스할 수 없습니다.사이트 간 스크립팅입니다.

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>

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

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

여기서의 트릭은 jQuery의.contents()메서드,.children()HTML 요소만 가져올 수 있습니다..contents()는 텍스트 노드와 HTML 요소를 모두 가져올 수 있습니다.그렇기 때문에 iframe을 사용하면 문서 내용을 얻을 수 있습니다.

jQuery에 대한 자세한 내용.contents(): .timeout()

iframe과 페이지는 같은 도메인에 있어야 합니다.

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

CallYourFunction()페이지 내 기능 및 페이지 내 기능 동작입니다.

다른 대답들은 모두 나에게 효과가 없었다.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(또는 다수의 iframe) 내에 네스트되어 있는지 여부에 관계없이 이 함수를 사용하여 페이지상의 임의의 요소를 조회할 수 있습니다.

function querySelectorAllInIframes(selector) {
  let elements = [];

  const recurse = (contentWindow = window) => {

    const iframes = contentWindow.document.body.querySelectorAll('iframe');
    iframes.forEach(iframe => recurse(iframe.contentWindow));
    
    elements = elements.concat(contentWindow.document.body.querySelectorAll(selector));
  }

  recurse();

  return elements;
};

querySelectorAllInIframes('#elementToBeFound');

주의: 페이지의 각 iframe은 같은 발신기지여야 합니다.그렇지 않으면 이 함수는 오류를 발생시킵니다.

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

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

언급URL : https://stackoverflow.com/questions/1088544/get-element-from-within-an-iframe