Native JS를 사용하여 부모 페이지에서 iframe 하위 페이지의 요소를 가져 와서 자식 페이지에서 부모 페이지의 요소를 가져옵니다. 이것은 종종 사용되는 방법입니다. 다음은 요약 할 예입니다.
1. 부모 페이지 (demo.html) , 부모 페이지의 자식 페이지의 배경색을 회색으로 수정하면 빨간색으로 판명됩니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/<title> demomain page </title> <script type/javascript "정 (var _). document.getElementById ( 'iframeId'). contentWindow; var _div = _iframe.document.getElementById ( 'objid'); _ div.style.backgroundColor = '#CCC';} </script> </head> <body> <bod = 'pardiv '> 부모 페이지 </div> <iframe src = "demo-iframe.html"id = "iframeid"> </iframe> </body> </html>
2. 하위 페이지 (Demo-Iframe.html) , 자식 페이지의 부모 페이지의 글꼴 색상을 빨간색으로 수정하면 검은 색으로 밝혀졌습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> subpage demo13-iframe.html </title> <text/javascript "> function () {var _iframe = wink Style = '너비 : 100px; 높이 : 100px; 배경색 : 빨간색;'> 서브 페이지 </div> </body> </html>3. 복제 다이어그램 :
(1) JS가 추가되지 않은 경우 렌더링 :
(2) JS를 추가 한 후 렌더링 :
위의 기사 "Native JS"는 Iframe에서 DOM 요소를 얻습니다. 아버지와 아들 페이지는 서로의 DOM 요소가 편집자가 공유하는 모든 내용입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 모든 사람들이 wulin.com을 더 지원할 수 있기를 바랍니다.