溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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實現frameset效果</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">
<h2>頂部</h2>
</div></div>
<div class="MainContainer"><div class="sidebar">邊欄</div>
<div id="main" class="main">內容</div></div>
</div>
</body>
</html>上文代碼運行效果如下：
關于html5中如何替代frameset標簽就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
