✍ 📁 🙈 🙉 🙊 : 標簽 iframe @ 顯示網頁

< iframe > 標籤的屬性 attributes

属性	描述
src	指定要被嵌入的網頁的網址 (URL)
height	指定 iframe 的高度，單位為像素 (pixel / %)
width	指定 iframe 的寬度，單位為像素 (pixel / %)
name	指定 iframe 的名稱 Name是可以重複的
id	指定 iframe 的身份證號碼 ID顯然是唯一的
frameborder	frameborder= 1 / 0 ，規定是否顯示框架周圍的邊框
longdesc	規定一個頁面，該頁面包含了有關 iframe 的較長描述
marginheight	定義 iframe 的頂部和底部的邊距
marginwidth	定義 iframe 的左側和右側的邊距
sandbox	該屬性對呈現在iframe框架中的內容啟用一些額外的限制條件 sandbox="" 啟用所有限制條件 sandbox="allow-same-origin" 允許將內容作為普通來源對待。如果未使用該關鍵字，嵌入的內容將被視為一個獨立的源 sandbox="allow-top-navigation" 嵌入的頁面的上下文可以導航（加載）內容到頂級的瀏覽上下文環境（browsing context）。如果未使用該關鍵字，這個操作將不可用 sandbox="allow-forms" 允許表單提交。 sandbox="allow-scripts" 允許腳本執行。
scrolling	規定是否在 iframe 中顯示滾動條 scrolling = "yes" scrolling = "no" scrolling = "auto"
seamless	規定 <iframe> 看上去像是包含文檔的一部分
srcdoc	規定在 <iframe> 中顯示的頁面的 HTML 內容
allow-forms	允許提交表單
allow-modals	允許打開 modal 視窗
allow-orientation-lock	允許鎖定螢幕方向，像是智慧型手機的水平朝向或垂直朝向
allow-pointer-lock	允許使用 Pointer Lock API
allow-popups	允許彈跳視窗，像是可以用 target="_blank"
allow-popups-to-escape-sandbox	允許彈跳視窗不繼承 sandbox 的設定
allow-presentation	允許開啟 presentation session
allow-same-origin	允許將 iframe 的內容視作 same origin
allow-scripts	允許 iframe 內容可以執行 JavaScript
allow-top-navigation	允許 iframe 可以將內容載入到 top level 的父層視窗，像是可以用 target="_top"
allow-top-navigation-by-user-activation	允許 iframe 可以將內容載入到 top level 的父層視窗，如果是使用者手動去點擊的話 sandbox: 當有這屬性時，表示針對 iframe 裡面的網頁啟用一些限制條件，屬性值如果留空表示啟用所有限制，當有設定值的時候表示移除這些限制，你可以用空格設定移除多個限制條件。可以用的值有

Edit

#iframe #iframe 標籤的屬性 #iframe 標籤的屬性 attributes #iframe attributes #iframe height #iframe width #iframe src #iframe name #iframe id #iframe frameborder #iframe longdesc #iframe marginheight #iframe marginwidth #iframe sandbox #iframe scrolling #iframe seamless #iframe srcdoc #iframe allow-forms #iframe allow-modals #iframe sallow-orientation-lock #iframe allow-pointer-lock #iframe allow-popups #iframe allow-popups-to-escape-sandbox #iframe allow-presentation #iframe allow-presentation #iframe allow-scripts #iframe allow-top-navigation #iframe allow-top-navigation-by-user-activation

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

iframe.contentWindow.document iframe.open() iframe.write() iframe.close()

框架內容窗口文檔寫入
iframe.contentWindow.document
iframe.open() iframe.write() iframe.close()

   HTML 內聯框架元素 <iframe> 表示嵌套的browsing context，
   它能夠將另一個 HTML 頁面嵌入到當前頁面中。
   使用document.write()建立的iframe文件，
      <iframe id="iframe"  ></iframe> 
      var ifdoc = document.getElementById('iframe').contentWindow.document，
      ifdoc.open()
      ifdoc.write( html 內容 )
      ifdoc.write( html 內容 )
      ifdoc.write( html 內容 )
      ifdoc.close()

outT =  "<font size='6' color='blue'>" ;
outT += "  < script > <br>" ;
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.body.children.length = " + 
                  iff.contentWindow.document.body.children.length;

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 #script open() #script write() #script close()

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

iframe 標籤的屬性 attributes

< iframe > 標籤的屬性 attributes

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

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

iframe.contentWindow.document iframe.open() iframe.write() iframe.close()

框架內容窗口文檔寫入
iframe.contentWindow.document
iframe.open() iframe.write() iframe.close()

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

iframe 標籤的屬性 attributes

< iframe > 標籤的屬性 attributes

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

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

iframe.contentWindow.document iframe.open() iframe.write() iframe.close()

框架 內容窗口 文檔 寫入 iframe.contentWindow.document iframe.open() iframe.write() iframe.close()

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

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

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

框架內容窗口文檔寫入
iframe.contentWindow.document
iframe.open() iframe.write() iframe.close()