✍ 📁 🙈 🙉 🙊 : iframe innerHTML 框架內容窗口文檔寫入

iframe innerHTML 框架內容窗口文檔寫入

   HTML 內聯框架元素 < iframe > 表示嵌套的browsing context，
   它能夠將另一個 HTML 頁面嵌入到當前頁面中。
       <iframe id="iframe"  ></iframe> 
       iframe = document.getElementById('iframe')
       ifdoc =iframe.contentWindow.document.body 
       ifdoc =iff.contentWindow.document.body 
       ifdoc.innerHTML = '  html 內容  '

var ifdoc =iff.contentWindow.document.body ;
ifdoc.innerHTML ='<body>' ;
ifdoc.innerHTML+='<font size="6" color="blue"><b>this iframe id is iframe ';
ifdoc.innerHTML+='<p id="Pid">PPP</p>';
ifdoc.innerHTML+='<div id="DIV1" >div1</div>' ;
ifdoc.innerHTML+='<div id="DIV2" >div2</div>' ;
ifdoc.innerHTML+='<a   id="aid" >aaa</a>' ;
ifdoc.innerHTML+='</body>' ;
            //or
//var ifdoc = document.getElementById('iframe').contentWindow.document;
//ifdoc.open();
//ifdoc.write('<p id="Pid">PPP</p>');
//ifdoc.write('<body>');
//ifdoc.write('<div id="DIV1" >div1</div>');
//ifdoc.write('<div id="DIV2" >div2</div>');
//ifdoc.write('<a id="aid" >aaa</a>');
//ifdoc.write('</body>');
//ifdoc.close();
</script>

outT =  "<font size='6' color='blue'>" ;
outT += "<B>var iff = document.getElementById('iframe')</B>" ;
outT +=  "<br><font size='5' color='black'>" ;
outT += "<br>iff = " + iff   ;
outT += "<br>iff.nodeName = "+iff.nodeName   ;
outT += "<br>iff.children.length  = " + iff.children.length  ;

outT += "<br>iff.contentWindow.document = " + iff.contentWindow.document  ;
outT += "<br> iff.contentWindow.document.body  = " + 
                  iff.contentWindow.document.body ;
outT += "<br> iff.contentWindow.document.body.innerText  = " + 
                  iff.contentWindow.document.body.innerText;

outT += "<br> iff.contentWindow.document.body.children.length = " + 
                  iff.contentWindow.document.body.children.length;

outT += "<div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.children[0].nodeName  = " + 
                  iff.contentWindow.document.body.children[0].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[1].nodeName  = " + 
                  iff.contentWindow.document.body.children[1].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[2].nodeName  = " + 
                  iff.contentWindow.document.body.children[2].nodeName  ;
outT += "<br> iff.contentWindow.document.body.children[3].nodeName  = " + 
                  iff.contentWindow.document.body.children[3].nodeName  ;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.children[0].id= " + 
                  iff.contentWindow.document.body.children[0].id;
outT += "<br> iff.contentWindow.document.body.children[1].id= " + 
                  iff.contentWindow.document.body.children[1].id;
outT += "<br> iff.contentWindow.document.body.children[2].id= " + 
                  iff.contentWindow.document.body.children[2].id;outT += "<br> iff.contentWindow.document.body.children[3].id= " + 
                  iff.contentWindow.document.body.children[3].id;

outT += "</div><div style='border: 2px solid red'>" ;
outT += " iff.contentWindow.document.body.innerHTML = " + 
                  iff.contentWindow.document.body.innerHTML ;
outT += "</div>" ;

DP.innerHTML  = outT ;
</script>

Edit

#iframe #內聯框架元素 #document #contentWindow #iframe.contentWindow.document #innerHTML #iframe.contentWindow.document.body

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單