html5 frameset標籤的替代方案是什嗎？frameset標籤替代的解決辦法

最後更新：2018-09-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章主要的介紹了關於html5 frameset標籤的替代方案執行個體解析，還有關於html5 frameset標籤的兩個解決辦法，現在讓我們一起來看這篇文章吧

首先我們先看看html5 frameset標籤的替代方案是什麼：

頁面盡量少用 frameset 不利於被搜尋引擎搜尋到。

下面是在Visual Studio中對FrameSet與Frame的警告提示:

警告驗證 (XHTML 1.0 Transitional): 不支援元素“frameset”。

警告驗證 (XHTML 1.0 Transitional): 不支援元素“frame”。

新的HTML標準已經不支援FrameSet與Frame元素,替代方式之一是用DIV配合IFrame與CSS替代FrameSet元素.IFrame根據不同的內容,高寬自適應其實很簡單,但是很多人沒有解決,其解決方案如下<即在onLoad方法中設定其高與寬即可>:



<div id="navigation">
<！--其中可以用asp.net中的TreeView，Menu等功能表控制項或者用HTML的<u><li>標記配合CSS，配寘選單可以在DataBase中動態讀取或者在
XML中配寘-->  </div>
<div id="content">
<iframe id="contentIFrame" name="Content" src="XMLDataBinding.aspx" scrolling="no" frameborder="0"
onload="this.height=this.contentWindow.document.body.scrollHeight+5;this.width=this.contentWindow.document
.body.scrollWidth+5;" />
</div>

這麼使用是在網上看到的比較好的方案之一了。

現在我們介紹下關於frameset標籤替代的解決辦法：（html5不支援frameset的，所以解決方案有以下兩種）

1.使用iframe，但是目前使用iframe的人已經越來越少了，而且iframe在不同瀏覽器之間還有不相容的情況。

2.使用jQuery的onload方法載入頁面，不過這種方法跳轉多個頁面後，點擊瀏覽器上方的後退前進是無效的，不過可以認為的添加一個返回按鈕。所以更流行的是這種方法：

看看關於frameset標籤的代碼執行個體說明：



<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>div+css實現框架集效</title>
        <style type="text/css">.header{border-bottom:1px solid #ccc;margin-bottom:5px;}
        .MainContainer{min-width:960px;max-width:1600px;}
        .sidebar{width:180px;float:left;margin-right:-180px;border-right:1px solid #ccc;min-height:500px;
        padding:5px;}.main{float:left;margin-left:200px;padding:5px;}
        .content{padding:0 10px;}
        </style>
    </head>
    <body>    
    <div class="page"><div class="header"><div id="title">
        <h1>頂部</h1>
        </div></div>
        <div class="MainContainer"><div class="sidebar">边栏</div>
        <div id="main" class="main">内容</div></div>
    </div>
    </body>
</html>

以上就是本篇關於HTML5 frameset標籤的替代方案，還有替代後的解決辦法執行個體解析。有問題的可以在下方提問

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More