碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
和<frame>標簽屬性詳解</a></h3> </center> <div class="postinfo"> 本文轉載自 <i class="icon-globe"></i>&nbsp;<a href="/go/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vaHpiNDYyNjA2L3AvMTEzOTQ2ODMuaHRtbA==" target="_blank">查看原文</a> <i class="icon-time"></i>&nbsp;<span>2019-08-22 15:40</span> <i class="icon-eye-open"></i>&nbsp;<span>3497&nbsp;</span> <i class="icon-tag"></i>&nbsp; <span><a href='/tag/前端問題集錦' target="_blank">前端問題集錦</a>/</span> <span><a href='/tag/前端-Html5知識點' target="_blank">前端-Html5知識點</a></span> <i class="icon-star" title="9.9769"></i> <i class="icon-star" title="9.9769"></i> <i class="icon-star" title="9.9769"></i> <i class="icon-star" title="9.9769"></i> <i class="icon-star" title="9.9769"></i> </div> <hr/> <div class="media-body" id="content_div"> <div class="title_down_ad ad"> </div> <div class="post_content" id="postContent"> <div> <p>iframe&gt;元素會創建包含另外一個文檔的內聯框架（即行內框架）；</p> <h5>一、align 屬性（不贊成）</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align屬性規定iframe相對於周圍元素的水平和垂直對齊方式，因為iframe元素是行內元素，即不會在頁面上插入新行，這意味着文本和其他元素可以圍繞在其周圍，所以align屬性可以規定iframe相對於周圍元素的對齊方式；</p> <h5>二、frameborder屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameborder屬性規定是否顯示iframe周圍的邊框，但出於實用性方面的原因，最好不用設置該屬性，而使用CSS來設置邊框,是否顯示邊框：1(yes),0(no)；</p> <div class="cnblogs_Highlighter"> <pre class="brush:csharp;gutter:true;">&lt;html&gt; &lt;body&gt; &lt;iframe src ="/index.html" width="400" height="300" frameborder="0"&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt; </pre> </div> <p> </p> <h5>三、height 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定 iframe 的高度；</p> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;body&gt; &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span> width=<span style="color: #800000;">"</span><span style="color: #800000;">400px</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">500px</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>四、marginheight 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定 iframe 的頂部和底部的空白邊距，以像素計；</p> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;body&gt; &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/demo_iframe.html</span><span style="color: #800000;">"</span> marginheight=<span style="color: #800000;">"</span><span style="color: #800000;">50px</span><span style="color: #800000;">"</span><span style="color: #000000;"> width</span>=<span style="color: #800000;">"</span><span style="color: #800000;">400px</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">300px</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>五、marginwidth 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定 iframe 的左邊和右邊的空白邊距，以像素計；</p> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;body&gt; &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/demo_iframe.html</span><span style="color: #800000;">"</span> marginwidth=<span style="color: #800000;">"</span><span style="color: #800000;">50px</span><span style="color: #800000;">"</span><span style="color: #000000;"> width</span>=<span style="color: #800000;">"</span><span style="color: #800000;">400px</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">300px</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>六、name 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定 iframe 的名稱，iframe 元素的 name 屬性用於在 JavaScript 中引用元素，或者作為鏈接的目標；</p> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;body&gt; &lt;iframe src=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/demo_iframe.html</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">iframe_a</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.w3school.com.cn</span><span style="color: #800000;">"</span> target=<span style="color: #800000;">"</span><span style="color: #800000;">iframe_a</span><span style="color: #800000;">"</span>&gt;W3School.com.cn&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>七、sandbox屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果被規定為空字符串（sandbox=""），sandbox 屬性將會啟用一系列對行內框架中內容的額外限制，sandbox 屬性的值既可以是一個空字符串（應用所有的限制），也可以是空格分隔的預定義值列表（將移除特定的限制）；</p> <ul> <li>""：應用以下所有的限制；</li> <li>allow-same-origin：允許 iframe 內容被視為與包含文檔有相同的來源；</li> <li>allow-top-navigation：允許 iframe 內容從包含文檔導航（加載）內容；</li> <li>allow-forms：允許表單提交；</li> <li>allow-scripts：允許腳本執行；</li> </ul> <div class="cnblogs_code"> <pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;iframe src=<span style="color: #800000;">"</span><span style="color: #800000;">/demo/demo_iframe_sandbox.html</span><span style="color: #800000;">"</span> sandbox=<span style="color: #800000;">""</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;p&gt;<span style="color: #800000;">"</span><span style="color: #800000;">獲得日期和時間</span><span style="color: #800000;">"</span> 按鈕會在行內框架中運行一段腳本。&lt;/p&gt; &lt;p&gt;由於 sandbox 屬性被設置為空字符串 (<span style="color: #800000;">""</span>)，行內框架的內容不允許運行腳本。&lt;/p&gt; &lt;p&gt;如果向 sandbox 屬性添加 <span style="color: #800000;">"</span><span style="color: #800000;">allow-scripts</span><span style="color: #800000;">"</span>，則允許運行 JavaScript。&lt;/p&gt; &lt;p&gt;&lt;b&gt;注釋：&lt;/b&gt;IE <span style="color: #800080;">9</span> 以及更早的版本不支持 sandbox 屬性，Opera <span style="color: #800080;">12</span> 以及更早的版本也不支持該屬性。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>八、scrolling 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定是否在 iframe 中顯示滾動條，默認地，如果內容超出了 iframe，滾動條就會出現在 iframe 中；</p> <ul> <li>auto：在需要的情況下出現滾動條（默認值）；</li> <li>yes：始終顯示滾動條（即使不需要）；</li> <li>no：從不顯示滾動條（即使需要）；</li> </ul> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;body&gt; &lt;h3&gt;iframe 中始終顯示滾動條：&lt;/h3&gt; &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span> width=<span style="color: #800000;">"</span><span style="color: #800000;">200</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">200</span><span style="color: #800000;">"</span> scrolling=<span style="color: #800000;">"</span><span style="color: #800000;">yes</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;h3&gt;iframe 中從不顯示滾動條：&lt;/h3&gt; &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span> width=<span style="color: #800000;">"</span><span style="color: #800000;">200</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">200</span><span style="color: #800000;">"</span> scrolling=<span style="color: #800000;">"</span><span style="color: #800000;">no</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>九、seamless 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;屬於邏輯屬性，當設置該屬性后，它規定了 &lt;iframe&gt; 看上去像是包含文檔的一部分（無邊框或滾動條）；</p> <div class="cnblogs_code"> <pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;p&gt;這是一個段落。&lt;/p&gt; &lt;iframe src=<span style="color: #800000;">"</span><span style="color: #800000;">/demo/demo_iframe.html</span><span style="color: #800000;">"</span> seamless&gt;&lt;/iframe&gt; &lt;p&gt;&lt;b&gt;注釋：&lt;/b&gt;Opera、Chrome 以及 Safari 支持 seamless 屬性。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>十、src 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定在 iframe 中顯示的文檔的 URL；</p> <ul> <li>絕對 URL：指向其他站點（比如 src="<a href="/link/aHR0cDovL3d3dy5leGFtcGxlLmNvbS9pbmRleC5odG1s" rel="nofollow noopener" target="_blank">www.example.com/index.html</a>"）；</li> <li>相對 URL：指向站點內的文件（比如 src="index.html"）；</li> </ul> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;body&gt; &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>十一、srcdoc 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定頁面的 HTML 內容顯示在行內框架中，該屬性與 sandbox 和 seamless 屬性一同使用，如果瀏覽器不支持 srcdoc 屬性，則相應地會顯示在 src 屬性（若已設置）中規定的文件；</p> <div class="cnblogs_code"> <pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;iframe srcdoc=<span style="color: #800000;">"</span><span style="color: #800000;">&lt;p&gt;Hello world!&lt;/p&gt;</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/demo/demo_iframe_srcdoc.html</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;p&gt;&lt;b&gt;注釋：&lt;/b&gt;所有主流瀏覽器都支持 srcdoc 屬性，除了 Internet Explorer。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>十二、width 屬性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;規定 iframe 的寬度；</p> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;body&gt; &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span> width=<span style="color: #800000;">"</span><span style="color: #800000;">400px</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">300px</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>&nbsp;</p> <h5>十三、iframe的基本特性</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通常使用Iframe最基本的特性，就是能自由操作iframe和父框架的內容（DOM），但前提條件是同域，如果跨域頂多只能實現頁面跳轉window.location.href；</p> <pre class="hljs javascript"><code class="javascript">A:<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">iframe <span class="hljs-attr">id=<span class="hljs-string">"mainIframe" <span class="hljs-attr">name=<span class="hljs-string">"mainIframe" <span class="hljs-attr">src=<span class="hljs-string">"/main.html" <span class="hljs-attr">frameborder=<span class="hljs-string">"0" <span class="hljs-attr">scrolling=<span class="hljs-string">"auto" &gt;<span class="hljs-tag">&lt;/<span class="hljs-name">iframe&gt; B:<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">iframe <span class="hljs-attr">id=<span class="hljs-string">"mainIframe" <span class="hljs-attr">name=<span class="hljs-string">"mainIframe" <span class="hljs-attr">src=<span class="hljs-string">"http://www.baidu.com" <span class="hljs-attr">frameborder=<span class="hljs-string">"0" <span class="hljs-attr">scrolling=<span class="hljs-string">"auto" &gt;<span class="hljs-tag">&lt;/<span class="hljs-name">iframe&gt; </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre> <p>使用A時，因為同域，父頁面可以對子頁面進行改寫,反之亦然；<br> 使用B時，不同域，父頁面沒有權限改動子頁面,但可以實現頁面的跳轉；</p> <h5>十四、獲取iframe里的內容</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>iframe.contentWindow</strong>：獲取iframe的window對象；<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>iframe.contentDocument</strong>：獲取iframe的document對象；<br> 這兩個API只是DOM節點提供的方式(即getELement系列對象)</p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;">var</span> iframe = document.getElementById(<span style="color: #800000;">"</span><span style="color: #800000;">iframe1</span><span style="color: #800000;">"</span><span style="color: #000000;">); </span><span style="color: #0000ff;">var</span> iwindow =<span style="color: #000000;"> iframe.contentWindow; </span><span style="color: #0000ff;">var</span> idoc =<span style="color: #000000;"> iwindow.document; console.log(</span><span style="color: #800000;">"</span><span style="color: #800000;">window</span><span style="color: #800000;">"</span>,iwindow);<span style="color: #008000;">//</span><span style="color: #008000;">獲取iframe的window對象</span> console.log(<span style="color: #800000;">"</span><span style="color: #800000;">document</span><span style="color: #800000;">"</span>,idoc); <span style="color: #008000;">//</span><span style="color: #008000;">獲取iframe的document</span> console.log(<span style="color: #800000;">"</span><span style="color: #800000;">html</span><span style="color: #800000;">"</span>,idoc.documentElement);<span style="color: #008000;">//</span><span style="color: #008000;">獲取iframe的html</span> console.log(<span style="color: #800000;">"</span><span style="color: #800000;">head</span><span style="color: #800000;">"</span>,idoc.head); <span style="color: #008000;">//</span><span style="color: #008000;">獲取head</span> console.log(<span style="color: #800000;">"</span><span style="color: #800000;">body</span><span style="color: #800000;">"</span>,idoc.body); <span style="color: #008000;">//</span><span style="color: #008000;">獲取body</span> &lt;iframe src =<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">ifr1</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">ifr1</span><span style="color: #800000;">"</span> scrolling=<span style="color: #800000;">"</span><span style="color: #800000;">yes</span><span style="color: #800000;">"</span>&gt; &lt;p&gt;Your browser does not support iframes.&lt;/p&gt; &lt;/iframe&gt; &lt;script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>&gt;<span style="color: #000000;"> console.log(window.frames[</span><span style="color: #800000;">'</span><span style="color: #800000;">ifr1</span><span style="color: #800000;">'</span><span style="color: #000000;">].window); console.dir(document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">ifr1</span><span style="color: #800000;">"</span><span style="color: #000000;">).contentWindow); </span>&lt;/script&gt;</pre> </div> <p>&nbsp;</p> <h5>十五、在iframe中獲取父級內容</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在同域下，子iframe同樣也能操作父頁面內容，在iframe中，可以通過在window上掛載的幾個API進行獲取；<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>window.parent：</strong>獲取上一級的window對象，如果還是iframe則是該iframe的window對象；<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>window.top：</strong>獲取最頂級容器的window對象，即打開頁面的文檔；<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>window.self：</strong>返回自身window的引用，可以理解為window===window.self；</p> <h5>十六、iframe的輪詢</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;之前的網頁可以使用iframe實現異步發送請求；<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ajax的長輪詢是在ajax的readyState=4時再次執行原函數，這里使用iframe也是一樣，異步創建iframe，然后reload，和后台協商好，看后台返回的信息放在哪，然后獲取里面的信息即可，這里是直接放在body里；</p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;">var</span> iframeCon = docuemnt.querySelector(<span style="color: #800000;">'</span><span style="color: #800000;">#container</span><span style="color: #800000;">'</span>),text; <span style="color: #008000;">//</span><span style="color: #008000;">傳遞的信息</span> <span style="color: #0000ff;">var</span> iframe = document.createElement(<span style="color: #800000;">'</span><span style="color: #800000;">iframe</span><span style="color: #800000;">'</span><span style="color: #000000;">), iframe.id </span>= <span style="color: #800000;">"</span><span style="color: #800000;">frame</span><span style="color: #800000;">"</span><span style="color: #000000;">, iframe.style </span>= <span style="color: #800000;">"</span><span style="color: #800000;">display:none;</span><span style="color: #800000;">"</span><span style="color: #000000;">, iframe.name</span>=<span style="color: #800000;">"</span><span style="color: #800000;">polling</span><span style="color: #800000;">"</span><span style="color: #000000;">, iframe.src</span>=<span style="color: #800000;">"</span><span style="color: #800000;">target.html</span><span style="color: #800000;">"</span><span style="color: #000000;">; iframeCon.appendChild(iframe); iframe.onload</span>=<span style="color: #000000;"> function(){ </span><span style="color: #0000ff;">var</span> iloc =<span style="color: #000000;"> iframe.contentWindow.location, idoc </span>=<span style="color: #000000;"> iframe.contentDocument; setTimeout(function(){ text </span>= idoc.getElementsByTagName(<span style="color: #800000;">'</span><span style="color: #800000;">body</span><span style="color: #800000;">'</span>)[<span style="color: #800080;">0</span><span style="color: #000000;">].textContent; console.log(text); iloc.reload(); </span><span style="color: #008000;">//</span><span style="color: #008000;">刷新頁面,再次獲取信息，並且會觸發onload函數</span> },<span style="color: #800080;">2000</span><span style="color: #000000;">); }</span></pre> </div> <p>&nbsp;</p> <h5>十七、自適應iframe之蜜汁廣告</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通常使用iframe在頁面引入廣告，因為廣告一般是與頁面內容不相關的，如果使用div在頁面中嵌套，會造成網頁內容的紊亂，而且這樣勢必需要引入額外的css和js，極大的降低了網頁的安全性，因此需要使用iframe來插入廣告，我們可以將iframe理解為一個沙盒，里面的內容能夠被top window完全控制，而且主頁的css樣式是不會入侵iframe里面的樣式，這些都給iframe的廣告命運埋下伏筆，默認情況下，iframe是不適合做展示信息的，需要對其進行decorate；</p> <h5>自適應iframe</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第一步：默認情況下，iframe會自帶滾動條，不會全屏，如果想自適應iframe，需要去掉滾動條；</p> <div class="cnblogs_code"> <pre>&lt;iframe src=<span style="color: #800000;">"</span><span style="color: #800000;">./iframe1.html</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">iframe1</span><span style="color: #800000;">"</span> scrolling=<span style="color: #800000;">"</span><span style="color: #800000;">no</span><span style="color: #800000;">"</span>&gt;&lt;/iframe&gt;</pre> </div> <p>&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第二步：設置iframe的高為body的高；</p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;">var</span> iwindow =<span style="color: #000000;"> iframe.contentWindow; </span><span style="color: #0000ff;">var</span> idoc =<span style="color: #000000;"> iwindow.document; iframe.height </span>= idoc.body.offsetHeight;</pre> </div> <p>&nbsp;</p> <p>此外，還可以添加其他的裝飾屬性：<br> 1）allowtransparency：true or false，是否允許iframe設置為透明，默認為false；<br> 2）allowfullscreen：true or false，是否允許iframe全屏，默認為false；</p> <pre class="hljs javascript"><code class="javascript"><span class="hljs-comment">// 樣式可以直接寫在內聯樣式里面，也可以在css里面定義，不過對於廣告iframe來說，樣式寫在屬性中，是best pratice；</span></code></pre> <div class="cnblogs_code"> <pre>&lt;iframe id=<span style="color: #800000;">"</span><span style="color: #800000;">google_ads_frame2</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">google_ads_frame2</span><span style="color: #800000;">"</span> width=<span style="color: #800000;">"</span><span style="color: #800000;">160</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">600</span><span style="color: #800000;">"</span> frameborder=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">target.html</span><span style="color: #800000;">"</span> marginwidth=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> marginheight=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> vspace=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> hspace=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> allowtransparency=<span style="color: #800000;">"</span><span style="color: #800000;">true</span><span style="color: #800000;">"</span> scrolling=<span style="color: #800000;">"</span><span style="color: #800000;">no</span><span style="color: #800000;">"</span> allowfullscreen=<span style="color: #800000;">"</span><span style="color: #800000;">true</span><span style="color: #800000;">"</span>&gt;&lt;/iframe&gt;</pre> </div> <p>&nbsp;</p> <h5>十八、iframe安全性探索</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe出現安全性有兩個方面，一是你的網頁被別人iframe；二是你iframe別人的網頁；當你的網頁被別人iframe時，可能容易被釣魚網站利用，為了防止頁面被一些不法分子利用，我們需要做好安全性措施；</p> <h6>防嵌套網頁</h6> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;比如clickhacking就是使用iframe來攔截click事件，因為iframe享受着click的最優先權，當有人在偽造的主頁中進行點擊的話，如果點在iframe上，則會默認是在操作iframe的頁面，所以釣魚網站就是使用這個技術，通過誘導用戶進行點擊，比如設計一個“妹妹寂寞了”等之類的網頁，誘導用戶點擊，但實際結果，看到的不是“妹妹”，而是被惡意微博吸粉，所以為了防止網站被釣魚，可以使用window.top來防止網頁被iframe；</p> <pre class="hljs javascript"><code class="javascript"><span class="hljs-comment">&nbsp;</span></code></pre> <div class="cnblogs_code"> <pre></pre> <pre class="hljs javascript"><code class="javascript"><span class="hljs-comment">//iframe2.html <span class="hljs-comment">// 限定你的網頁不能嵌套在任意網頁內</span></span></code></pre> <pre><span style="color: #0000ff;"><br>if</span>(window !=<span style="color: #000000;"> window.top){ window.top.location.href </span>=<span style="color: #000000;"> correctURL; }</span></pre> </div> <p>&nbsp;</p> <p>這段代碼的主要用途是限定你的網頁不能嵌套在任意網頁內。如果你想引用同域的框架的話，可以判斷域名。</p> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;"> 如果想引用同域的框架的話，可以判斷域名，如果不同域的話，上述內容會報錯</span> <span style="color: #0000ff;">if</span> (top.location.host !=<span style="color: #000000;"> window.location.host) { top.location.href </span>=<span style="color: #000000;"> window.location.href; }</span></pre> </div> <p>&nbsp;</p> <p>所以，這里可以使用try...catch...進行錯誤捕獲。如果發生錯誤，則說明不同域，表示你的頁面被盜用了。可能有些瀏覽器這樣寫是不會報錯，所以需要降級處理。<br> 這時候再進行跳轉即可.</p> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;"> 使用try...catch...進行錯誤捕獲，如果發生錯誤，則說明不同域，表示頁面被盜用了</span> <span style="color: #0000ff;">try</span><span style="color: #000000;">{ top.location.hostname; </span><span style="color: #008000;">//</span><span style="color: #008000;">檢測是否出錯 </span><span style="color: #008000;">//</span><span style="color: #008000;">如果沒有出錯，則降級處理</span> <span style="color: #0000ff;">if</span> (top.location.hostname !=<span style="color: #000000;"> window.location.hostname) { top.location.href </span>=<span style="color: #000000;">window.location.href; } } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e){ top.location.href </span>=<span style="color: #000000;"> window.location.href; }</span></pre> </div> <p>&nbsp;</p> <h6>X-Frame-Options</h6> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X-Frame-Options是一個相應頭，主要是描述服務器的網頁資源的iframe權限，其實就是將前端js對iframe的把控權交給服務器來進行處理：</p> <ul> <li>X-Frame-Options: DENY：拒絕任何iframe的嵌套請求；</li> <li>X-Frame-Options: SAMEORIGIN：只允許同源請求，例如網頁為 foo.com/123.php，則 foo.com 底下的所有網頁可以嵌入此網頁，但是 foo.com 以外的網頁不能嵌入；</li> <li>X-Frame-Options: ALLOW-FROM <a href="/link/aHR0cDovL3MzMTMxMjEyLmNvbQ==" rel="nofollow noopener" target="_blank">http://s3131212.com</a>：只允許指定網頁的iframe請求，不過兼容性較差，Chrome不支持；</li> </ul> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;">js</span> <span style="color: #0000ff;">if</span>(window !=<span style="color: #000000;"> window.top){ window.top.location.href </span>=<span style="color: #000000;"> window.location.href; } </span><span style="color: #008000;">//</span><span style="color: #008000;">等價於</span> X-Frame-Options: DENY <span style="color: #008000;">//</span><span style="color: #008000;">js</span> <span style="color: #0000ff;">if</span> (top.location.hostname !=<span style="color: #000000;"> window.location.hostname) { top.location.href </span>=<span style="color: #000000;">window.location.href; } </span><span style="color: #008000;">//</span><span style="color: #008000;">等價於</span> X-Frame-Options: SAMEORIGIN&lt;/pre&gt;</pre> </div> <p>&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X-Frame-Options屬性是對頁面的iframe進行的一個主要限制，不過涉及iframe的header可不止這一個，另外還有一個Content Security Policy，他同樣也可以對iframe進行限制，而且他應該是未來網頁安全防護的主流；</p> <h5>CSP之頁面防護</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;和X-Frames-Options一樣，都需要在服務端設置好相關的Header，CSP能夠極大的防止頁面被XSS攻擊，而且可以制定js，css，img等相關資源的origin，防止被惡意注入，不過兼容性不好；<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用主要是在后端服務器上配置，在前端可以觀察Response Header里是否有這樣一個Header：</p> <pre class="hljs java"><code class="java">Content-Security-Policy: <span class="hljs-keyword">default-src <span class="hljs-string">'self' </span></span></code></pre> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通常我們可以在CSP后配置各種指定資源路徑，有</p> <ul> <li>default-src,</li> <li>script-src,</li> <li>style-src,</li> <li>img-src,</li> <li>connect-src,</li> <li>font-src,</li> <li>object-src,</li> <li>media-src,</li> <li>sandbox,</li> <li>child-src,</li> <li>...<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果未指定的話，會默認使用default-src規定的加載策略，默認配置就是同域： default-src "self"；這里還和iframe有一點瓜葛的就是child-src 和 sandbox，child-src就是用來指定iframe的有效加載路徑，其實和X-Frame-Options中配置allow-origin是一個道理，不過allow-origin沒有得到廠商的支持，而sandbox其實就和iframe的sandbox屬性是一樣的，他可以規定來源能夠帶有什么權限；</li> </ul> <pre class="hljs java"><code class="java">Content-Security-Policy: child-src <span class="hljs-string">'self' http:<span class="hljs-comment">//example.com; sandbox allow-forms allow-same-origin&lt;/pre&gt; </span></span></code></pre> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此時iframe的src就只能加載同域和example.com頁面，最后再補充一點：使用CSP能夠很好的防止XSS攻擊，原理就是CSP會默認escape掉內聯樣式和腳本以及eval執行，可以使用srcipt-src進行降低限制；</p> <pre class="hljs bash"><code class="bash">Content-Security-Policy: script-src <span class="hljs-string">'unsafe-inline' </span></code></pre> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;當然我們面臨的安全總量還有一個，就是當iframe別人的頁面時，我們需要對其進行安全設限，雖然跨域時iframe的安全性會大很多，但是互聯網沒有安全的地方，H5提供的新屬性sandbox可以很好的解決這個問題；</p> <h5>sandbox</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox就是用來給指定的iframe設置一個沙盒模型來限制iframe的更多權限，sandbox是H5的一個新屬性；</p> <pre class="hljs javascript"><code class="javascript"><span class="hljs-comment">// 這樣就可以對iframe頁面進行一系列的限制</span></code></pre> <div class="cnblogs_code"> <pre>&lt;iframe sandbox src=<span style="color: #800000;">"</span><span style="color: #800000;">...</span><span style="color: #800000;">"</span>&gt;&lt;/iframe&gt;</pre> </div> <p>&nbsp;</p> <p>可以進行如下操作：</p> <ul> <li>script腳本不能執行；</li> <li>不能發送ajax請求；</li> <li>不能使用本地存儲，即localStorage，cookie等；</li> <li>不能創建新的彈窗和window；</li> <li>不能發送表單；</li> <li>不能加載額外插件比如flash等；</li> </ul> <p>常用的配置項有：</p> <table> <thead> <tr> <th>配置</th> <th>效果</th> </tr> </thead> <tbody> <tr> <td>allow-forms</td> <td>允許進行提交表單</td> </tr> <tr> <td>allow-scripts</td> <td>運行執行腳本</td> </tr> <tr> <td>allow-same-origin</td> <td>允許同域請求,比如ajax,storage</td> </tr> <tr> <td>allow-top-navigation</td> <td>允許iframe能夠主導window.top進行頁面跳轉</td> </tr> <tr> <td>allow-popups</td> <td>允許iframe中彈出新窗口,比如,window.open,target="_blank"</td> </tr> <tr> <td>allow-pointer-lock</td> <td>在iframe中可以鎖定鼠標，主要和<a href="/link/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvemgtQ04vZG9jcy9BUEkvUG9pbnRlcl9Mb2NrX0FQSSNpZnJhbWVfLkU3LjlBLjg0LkU5Ljk5LjkwLkU1Ljg4LkI2" rel="nofollow noopener" target="_blank">鼠標鎖定</a>有關</td> </tr> </tbody> </table> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;"> 這樣可以保證js腳本的執行，但是禁止iframe里的javascript執行top.location = self.location</span> &lt;iframe sandbox=<span style="color: #800000;">"</span><span style="color: #800000;">allow-forms allow-same-origin allow-scripts</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">...</span><span style="color: #800000;">"</span>&gt;&lt;/iframe&gt;</pre> </div> <p>&nbsp;</p> <h5>resolve iframe跨域</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe就是一個隔離沙盒，相當於我們在一個頁面內可以操控很多個標簽頁一樣，如果踩坑的童鞋應該知道，iframe也可以解決跨域；<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe可以解決二級域名跨域的情況，即主域相同而子域不同的情況，在兩個不同子域下（某一方使用iframe嵌套在另一方）：</p> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;"> 兩個文件中分別加上document.domain = ‘foo.com’,指定相同的主域 </span><span style="color: #008000;">//</span><span style="color: #008000;"> 然后,兩個文檔就可以進行交互了</span> http: <span style="color: #008000;">//</span><span style="color: #008000;">www.foo.com/a.html</span> http: <span style="color: #008000;">//</span><span style="color: #008000;">script.foo.com/b.html </span><span style="color: #008000;">//</span><span style="color: #008000;">b.html是以iframe的形式嵌套在a.html中 </span><span style="color: #008000;">//</span><span style="color: #008000;">www.foo.com上的a.html</span> document.domain = <span style="color: #800000;">'</span><span style="color: #800000;">foo.com</span><span style="color: #800000;">'</span><span style="color: #000000;">; </span><span style="color: #0000ff;">var</span> ifr = document.createElement(<span style="color: #800000;">'</span><span style="color: #800000;">iframe</span><span style="color: #800000;">'</span><span style="color: #000000;">); ifr.src </span>= <span style="color: #800000;">'</span><span style="color: #800000;">http://script.foo.com/b.html</span><span style="color: #800000;">'</span><span style="color: #000000;">; ifr.style.display </span>= <span style="color: #800000;">'</span><span style="color: #800000;">none</span><span style="color: #800000;">'</span><span style="color: #000000;">; document.body.appendChild(ifr); ifr.onload </span>=<span style="color: #000000;"> function(){ </span><span style="color: #0000ff;">var</span> doc = ifr.contentDocument ||<span style="color: #000000;"> ifr.contentWindow.document; </span><span style="color: #008000;">//</span><span style="color: #008000;"> 在這里操縱b.html</span> alert(doc.getElementsByTagName(<span style="color: #800000;">"</span><span style="color: #800000;">h1</span><span style="color: #800000;">"</span>)[<span style="color: #800080;">0</span>].childNodes[<span style="color: #800080;">0</span><span style="color: #000000;">].nodeValue); }; </span><span style="color: #008000;">//</span><span style="color: #008000;">script.foo.com上的b.html</span> document.domain = <span style="color: #800000;">'</span><span style="color: #800000;">foo.com</span><span style="color: #800000;">'</span>;</pre> </div> <p>&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;默認情況下document.domain 是指window.location.hostname， 你可以手動更改，但是最多只能設置為主域名，通常，主域名就是指不帶www的hostname, 比如: <a href="/link/aHR0cDovL2Zvby5jb20=" rel="nofollow noopener" target="_blank">foo.com</a> , <a href="/link/aHR0cDovL2JhaWR1LmNvbQ==" rel="nofollow noopener" target="_blank">baidu.com</a> ， 如果帶上www或者其他的前綴，就是二級域名或者多級域名，通過上述設置，相同的domain之后，就可以進行同域的相關操作；</p> <h5>H5的CDM跨域與iframe</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果設置的iframe域名和top window域名完全不同，則可以使用CDM(cross document messaging)進行跨域消息的傳遞；<br> 發送消息：使用postmessage方法；<br> 接收消息：監聽message事件；</p> <h5>postmessage</h5> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;該方法掛載到window對象上，即使用window.postmessage()調用，該方法接受兩個參數：postMessage(message, targetOrigin)</p> <ul> <li>message：就是傳遞給iframe的內容，通常是string，如果想傳object對象也可以，但如果有條件，可以使用JSON.stringify進行轉化，這樣保證不會出bug；</li> <li>targetOrigin：接受你傳遞消息的域名，可以設置絕對路徑，也可以設置"*"或者"/"， *表示任意域名都行，"/"表示只能傳遞給同域域名；</li> </ul> <div class="cnblogs_code"> <pre>&lt;iframe src=<span style="color: #800000;">"</span><span style="color: #800000;">http://tuhao.com</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">sendMessage</span><span style="color: #800000;">"</span>&gt;&lt;/iframe&gt; <span style="color: #008000;">//</span><span style="color: #008000;">當前腳本</span> let ifr = window.frames[<span style="color: #800000;">'</span><span style="color: #800000;">sendMessage</span><span style="color: #800000;">'</span><span style="color: #000000;">]; </span><span style="color: #008000;">//</span><span style="color: #008000;">使用iframe的window向iframe發送message。</span> ifr.postmessage(<span style="color: #800000;">'</span><span style="color: #800000;">give u a message</span><span style="color: #800000;">'</span>, <span style="color: #800000;">"</span><span style="color: #800000;">http://tuhao.com</span><span style="color: #800000;">"</span><span style="color: #000000;">); </span><span style="color: #008000;">//</span><span style="color: #008000;">tuhao.com的腳本</span> window.addEventListener(<span style="color: #800000;">'</span><span style="color: #800000;">message</span><span style="color: #800000;">'</span>, receiver, <span style="color: #0000ff;">false</span><span style="color: #000000;">); function receiver(e) { </span><span style="color: #0000ff;">if</span> (e.origin == <span style="color: #800000;">'</span><span style="color: #800000;">http://tuhao.com</span><span style="color: #800000;">'</span><span style="color: #000000;">) { </span><span style="color: #0000ff;">if</span> (e.data == <span style="color: #800000;">'</span><span style="color: #800000;">give u a message</span><span style="color: #800000;">'</span><span style="color: #000000;">) { e.source.postMessage(</span><span style="color: #800000;">'</span><span style="color: #800000;">received</span><span style="color: #800000;">'</span>, e.origin); <span style="color: #008000;">//</span><span style="color: #008000;">向原網頁返回信息</span> } <span style="color: #0000ff;">else</span><span style="color: #000000;"> { alert(e.data); } } }</span></pre> </div> <p>&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;當targetOrigin接收到message消息之后,，會觸發message事件，message提供的event對象上有3個重要的屬性，data,origin,source：</p> <pre class="hljs javascript"><code class="javascript">data：postMessage傳遞進來的值； origin：發送消息的文檔所在的域； source：發送消息文檔的<span class="hljs-built_in">window對象的代理，如果是來自同一個域，則該對象就是<span class="hljs-built_in">window，可以使用其所有方法，如果是不同的域，則<span class="hljs-built_in">window只能調用postMessage()方法返回信息 </span></span></span></code></pre> <h5>十九、&lt;frameset&gt;和&lt;iframe&gt;的區別</h5> <ul> <li>iframe 和 frameset 都用於html頁面的框架布局；</li> <li>&lt;iframe&gt;：iframe 是個內聯框架，是在頁面里生成個內部框架；<br> &lt;frameset &gt;：frameset 定義一個框架集，包含多個子框架，每個框架都有獨立的文檔；</li> </ul> <div class="cnblogs_code"> <pre>&lt;html&gt; &lt;frameset cols=<span style="color: #800000;">"</span><span style="color: #800000;">25%,50%,25%</span><span style="color: #800000;">"</span>&gt; &lt;frame src=<span style="color: #800000;">"</span><span style="color: #800000;">frame_a.htm</span><span style="color: #800000;">"</span> /&gt; &lt;frame src=<span style="color: #800000;">"</span><span style="color: #800000;">frame_b.htm</span><span style="color: #800000;">"</span> /&gt; &lt;frame src=<span style="color: #800000;">"</span><span style="color: #800000;">frame_c.htm</span><span style="color: #800000;">"</span> /&gt; &lt;/frameset&gt; &lt;/html&gt;<span style="color: #000000;"> frame不能脫離frameSet單獨使用，iframe可以； frame不能放在body中： </span><span style="color: #008000;">//</span><span style="color: #008000;"> 如下可以正常顯示</span> &lt;!--&lt;body&gt;--&gt; &lt;frameset rows=<span style="color: #800000;">"</span><span style="color: #800000;">50%,*</span><span style="color: #800000;">"</span>&gt; &lt;frame name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;frame name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;/frameset&gt; &lt;!--&lt;body&gt;--&gt; <span style="color: #008000;">//</span><span style="color: #008000;"> 如下不能正常顯示： </span> &lt;body&gt; &lt;frameset rows=<span style="color: #800000;">"</span><span style="color: #800000;">50%,*</span><span style="color: #800000;">"</span>&gt; &lt;frame name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;frame name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;/frameset&gt; &lt;body&gt; </pre> </div> <p>&nbsp;</p> <ul> <li>嵌套在frameSet中的iframe必須放在body中：</li> </ul> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;"> 如下可以正常顯示： </span> &lt;body&gt; &lt;frameset&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;/frameset&gt; &lt;/body&gt; <span style="color: #008000;">//</span><span style="color: #008000;"> 如下不能正常顯示： </span> &lt;!--&lt;body&gt;--&gt; &lt;frameset&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;/frameset&gt; &lt;!--&lt;/body&gt;--&gt; </pre> </div> <p>&nbsp;</p> <ul> <li>不嵌套在frameSet中的iframe可以隨意使用；</li> </ul> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;"> 如下均可以正常顯示： </span> &lt;body&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;/body&gt; &lt;!--&lt;body&gt;--&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;iframe name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;!--&lt;/body&gt;--&gt;</pre> </div> <p>&nbsp;</p> <ul> <li>frame的高度只能通過frameSet控制，iframe可以自己控制，不能通過frameSet控制，如：</li> </ul> <div class="cnblogs_code"> <pre>&lt;!--&lt;body&gt;--&gt; &lt;frameset rows=<span style="color: #800000;">"</span><span style="color: #800000;">50%,*</span><span style="color: #800000;">"</span>&gt; &lt;frame name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;frame name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;/frameset&gt; &lt;!--&lt;/body&gt;--&gt; &lt;body&gt; &lt;frameset&gt; &lt;iframe height=<span style="color: #800000;">"</span><span style="color: #800000;">30%</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">frame1</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test1.htm</span><span style="color: #800000;">"</span>/&gt; &lt;iframe height=<span style="color: #800000;">"</span><span style="color: #800000;">100</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">frame2</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">test2.htm</span><span style="color: #800000;">"</span>/&gt; &lt;/frameset&gt; &lt;/body&gt; </pre> </div> <p>&nbsp;</p> <ul> <li> <p>如果在同一個頁面使用了兩個以上的iframe：<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IE中可以正常顯示，在firefox中只能顯示出第一個，使用兩個以上的frame在IE和firefox中均可正常顯示；</p> </li> <li> <p>frame與iframe兩者可以實現的功能基本相同，不過Iframe比frame具有更多的靈活性， frame是整個頁面的框架，iframe是內嵌的網頁元素，也可以說是內嵌的框架 :<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe標記又叫浮動幀標記，可以用它將一個HTML文檔嵌入在一個HTML中顯示，它和frame標記的最大區別是在網頁中嵌入的&lt;iframe&gt;&lt;/iframe&gt;所包含的內容與整個頁面是一個整體，而&lt;frame&gt;&lt;/frame&gt;所包含的內容是一個獨立的個體，是可以獨立顯示的，另外，應用iframe還可以在同一個頁面中多次顯示同一內容，而不必重復這段內容的代碼；</p> </li> <li> <p>iframe 可以放到表格里面，frame 則不行；</p> </li> </ul> <div class="cnblogs_code"> <pre>&lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;iframe id=<span style="color: #800000;">""</span> src=<span style="color: #800000;">""</span>&gt;&lt;/iframe&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </pre> </div> <p>&nbsp;</p> <ul> <li> <p>frame必須在frameset里，而frameset不能與body元素共存，也就說有frameset元素的文檔只能是一個框架集，不能有別的東西；</p> </li> <li> <p>iframe放在網頁的什么地方都行，但是frame只能放到上下左右四個方向；</p> </li> <li> <p>iframe是活動幀，而frame是非活動幀：</p> </li> </ul> <div class="cnblogs_code"> <pre><span style="color: #008000;">//</span><span style="color: #008000;"> iframe使用方法如下 </span> &lt;iframe scr=<span style="color: #800000;">"</span><span style="color: #800000;">sourcefile</span><span style="color: #800000;">"</span> frameborder=<span style="color: #800080;">0</span> width=<span style="color: #800000;">"</span><span style="color: #800000;">width</span><span style="color: #800000;">"</span> height=<span style="color: #800000;">"</span><span style="color: #800000;">height</span><span style="color: #800000;">"</span>&gt;&lt;/iframe&gt; </pre> </div> <p>&nbsp;</p> <ul> <li> <p>iframe用起來更靈活，不需要frame那么多講究，而且放的位置也可以自己設， iframe是內嵌的，不過也有不好的地方，就是位置在不同的瀏覽器和分辨率下有可能不同，有時會把本來好好的頁面搞得變形；</p> </li> <li> <p>iframe可以加在網頁中任何一個地方，而frame通常做框架頁，iframe是一個網頁中的子框架，兩網頁間是父子關系，frame是框架，由多個並列的網頁構成；</p> </li> <li> <p>iframe是浮動的，就像是浮動面板，而frame是固定的，只能四個方向上的；</p> </li> <li> <p>&lt;iframe&gt;是被嵌入在網頁的元素，而&lt;frame&gt;用於組成一個頁面的多個框架，iframe更利於版面的設計，frame一條直一條豎的不美觀，frame的那一條線也可以去掉的呦！只不過，iframe更方便對其進行數據的交換吧！<br> iframe可以放置到你想放的任意位置，控制起來比frame方便；</p> </li> <li> <p>iframe是內部幀，可以嵌在一個頁面里面，設置內部幀的屬性可以使得整體看上去像是一個完整的頁面，而不是由多個頁面組成，frame有frame的好處，比如更多網站，上面放廣告條，左邊放菜單，右邊放內容，這樣上邊和左邊的內容都可不動，只刷新右邊頁面的內容，選擇iframe還是frame完全看自己的需求；</p> </li> <li> <p>用iframe比用frame少一個文件（frameSet），但支持frame的瀏覽器比較多；</p> </li> </ul> <ul> <li> <p>iframe可以放在表格里,然后ifame設置成width=100%，height=100%，這樣就可以只需修改表格的寬度和高度，有利於排版 ；</p> </li> <li> <p>其實frame是一個控件，使用方法和Panle相同；</p> </li> <li> <p>frame是把網頁分成多個頁面的頁面。它要有一個框架集頁面frameset，iframe是一個浮動的框架，就是在你的頁面里再加上一個頁面；</p> </li> <li> <p>&lt;frame&gt;用來把頁面橫着或豎着切開，&lt;iframe&gt;用來在頁面中插入一個矩形的小窗口；</p> </li> <li> <p>frame一般用來設置頁面布局，將整個頁面分成規則的幾塊，每一塊里面包含一個新頁面，iframe用來在頁面的任何地方插入一個新的頁面，因此，frame用來控制頁面格式，比如一本書，左邊是章節目錄，右邊是正文，正文很長，看的時候要拖動，但又不想目錄也被拖動得看不到了，因此最好將頁面用frame分成規則的2頁，一左一右；而iframe則更靈活，不要求將整個頁面划分，可以在頁面任何地方用iframe嵌入新的頁面；</p> </li> <li> <p>&lt;frame&gt;用於全頁面；<br> &lt;iframe&gt;只用於局部；</p> </li> </ul> </div> <p> <br><br><br></p> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="read-more" id="read-more" style="display:none"></div> <div class="alert alert-info" style="margin-top:20px;"> <p id="tips_top1"> </p> </div> <script type="text/javascript"> $("#tips_top1").append("<strong><i class=\"icon-fire\"></i>溫馨提示：</strong>如果本文未解決您的問題，可以免費向大模型提問：<strong><a href='javascript:void(0)' class='gptbtn'>向AI大模型提問</a></strong>。"); </script> <div class="iframe-container"> </div> </div> <div class="ad_content_down ad"> </div> </div> <div class="disclaimer visible-desktop"> <br/> <div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>免責聲明！</h4> <p>本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。</p> </div> <br/><br/> </div> </div> <!-- 右邊相關博客和資料 --> <div class="span4 left_content"> <div id="left_list_div" class="left_content"> <span class="list-group-item" href="javascript:void(0)"><i class="icon-filter"></i><strong>猜您在找</strong></span> <a class='list-group-item' href="/blog/8d02871.html" title="iframe標簽和frame標簽異同"> <i class="icon-file"></i> iframe標簽和frame標簽異同 </a> <a class='list-group-item' href="/blog/abd4be1.html" title="詳解iframe與frame的區別"> <i class="icon-file"></i> 詳解iframe與frame的區別 </a> <a class='list-group-item' href="/blog/b9b0401.html" title="關於iframe標簽的src屬性"> <i class="icon-file"></i> 關於iframe標簽的src屬性 </a> <a class='list-group-item' href="/blog/db97c71.html" title="iframe標簽用法詳解"> <i class="icon-file"></i> iframe標簽用法詳解 </a> <a class='list-group-item' href="/blog/7598b71.html" title="iframe標簽用法詳解"> <i class="icon-file"></i> iframe標簽用法詳解 </a> <a class='list-group-item' href="/blog/5d59321.html" title="如何給frame標簽的src屬性以及a標簽的href屬性自動設值"> <i class="icon-file"></i> 如何給frame標簽的src屬性以及a標簽的href屬性自動設值 </a> <a class='list-group-item' href="/blog/5209321.html" title="關於框架iframe frame frameset的關系結合a標簽的target的應用"> <i class="icon-file"></i> 關於框架iframe frame frameset的關系結合a標簽的target的應用 </a> <a class='list-group-item' href="/blog/23f1f91.html" title="HTML標簽天天練6--<frameset><frame><iframe>網頁框架"> <i class="icon-file"></i> HTML標簽天天練6--<frameset><frame><iframe>網頁框架 </a> <a class='list-group-item' href="/blog/8a114d1.html" title="詳解HTML標簽和屬性"> <i class="icon-file"></i> 詳解HTML標簽和屬性 </a> <a class='list-group-item' href="/blog/aa51eb1.html" title="frame與iframe的區別及基本用法"> <i class="icon-file"></i> frame與iframe的區別及基本用法 </a> <div id="right_float_ad" class="ad"> </div> </div> </div> </div> </div> <div class="clear">&nbsp;</div> <div class="fbar" style="z-index:100"> <div class="span7" style="color:grey;font-size:12px;"> </div> <div class="pull-right"> <span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粵ICP備18138465號</a>&nbsp;&nbsp;</span><span>&copy; 2018-2025 CODEPRJ.COM </span> </div> </div> <script src="/js/code.js?version=20250506"></script> <script> function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c81b3b98809d882ddda9a802d3778cf4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
