html5 frameset标签的替代方案是什么？

百变鹏仔 2个月前 (10-18) #H5教程

文章标签标签

本篇文章主要的介绍了关于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根据不同的内容,高宽自适应其实很简单,但是很多人没有解决,其解决方法如下:

<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">        <h1>顶部</h1>        </div></div>        <div class="MainContainer"><div class="sidebar">边栏</div>        <div id="main" class="main">内容</div></div>    </div>    </body></html>

上文代码运行效果如下：

文章推荐

html5 frameset标签的替代方案是什么？

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集