반응형
document.getElementById를 사용하여 iframe 내부의 요소를 선택하는 방법
나는이 iframe같은를
<iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html">
<html>
<head></head>
<frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0">
<frame name="page1" src="c.html" scrolling="no"></frame>
<frame name="page2" src="d.html" >
<html>
<head></head>
<body id="top">
<div id="div1">
<div id="div2">
<div id="div3">
<ul id="x">
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</frame>
</frameset>
</html>
</iframe>
"x"요소를 참조하고 싶습니다. 여러 가지 방법으로 시도했지만 해결책을 찾지 못했습니다.
document.getElementById('myframe1').contentWindow.document.getElementById('x')
contentWindow IE의 이전 버전을 포함한 모든 브라우저에서 지원됩니다.
경우주의 iframe의는 src다른 도메인에서, 당신으로 인해 자사의 콘텐츠에 액세스 할 수 없습니다 동일 기원 정책 .
contentDocument이것을 달성하기 위해 사용
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument)
? iframe.contentDocument
: iframe.contentWindow.document;
var ulObj = innerDoc.getElementById("ID_TO_SEARCH");
(이것은 선택한 답변에 추가하는 것입니다)
iframe전에로드 되었는지 확인하십시오.
contentWindow.document
그렇지 않으면이 getElementById될 것입니다 null.
추신 : 댓글을 달 수는 없지만 여전히 댓글을 남기는 평판이 낮지 만 iframe내부 iframe 요소를 선택하기 전에로드를 강제해야한다는 것을 파악하기 위해 좋은 디버깅 시간을 보냈기 때문에 선택한 답변에 대한 후속 조치 입니다.
제 경우에는 pdfTron 툴바 를 잡으려고 했지만 안타깝게도 페이지를 새로 고칠 때마다 ID가 변경됩니다.
그래서 결국 그것을 잡았습니다.
const pdfToolbar = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HeaderItems');
tagName에 의해 작성된 배열에서와 같이 항상 애플리케이션의 iFrame에 대한 고정 인덱스를 갖게됩니다.
반응형
'Development Tip' 카테고리의 다른 글
| 경과 시간 계산 (0) | 2020.12.06 |
|---|---|
| C ++ std :: vector에서 모든 항목 삭제 (0) | 2020.12.06 |
| TypeScript에서 정적 메서드에 액세스하는 방법 (0) | 2020.12.06 |
| 중첩 된 개체의 동적 설정 속성 (0) | 2020.12.06 |
| Google 결과에서 데이터를 긁어도 괜찮습니까? (0) | 2020.12.06 |