html5不支持frameset的，所以解决方法有以下两种：
1、 使用iframe，但是目前使用iframe的人已经越来越少了，而且iframe在不同浏览器之间还有不兼容的情况。
2、使用jQuery的onload方法加载页面，不过这种方法跳转多个页面后，点击浏览器上方的后退前进是无效的，不过可以认为的添加一个返回按钮。所以更流行的是这种方法：
举例说明：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>div+css实现frameset效果</title>
<style type="text/css">
.header{border-bottom:1px solid #cccmargin-bottom:5px}
.MainContainer{min-width:960pxmax-width:1600px}
.sidebar{width:180pxfloat:leftmargin-right:-180pxborder-right:1px solid #cccmin-height:500pxpadding:5px}
.main{float:leftmargin-left:200pxpadding: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>
4、运行效果如下：
pushState 是人工插入历史记录和修改地址栏,此时地址栏虽然修改,但并不触发网页跳转,换句话说就是给看的而已,第一个参数是一个对象,可以放入需要的参数,第二个理论上标题名称,但据说无效什么的,第三个就是url.这是地址栏里显示的东西.popState 是点击浏览器的返回按钮就会触发,如果有push数据,就会在事件中获得state数据,里面就是pushState的第一个参数里的数据.
为了做微信的单页面结构,使用了这些功能,对一些需要特殊 *** 作的链接进行接管,点击这类链接就用pushState插入历史记录,并修改地址栏,然后用ajax获取链接的内容添加到document中去,接着隐藏当前的内容块,显示新获取的内容块.
因为本身ajax获取内容并不会引起历史记录的变化,所以用户本能的点击返回按钮想回退到上一个内容页的时候,会无效,所以这里需要用pushState填入返回需要的数据,并自己在popState里处理对应的隐藏现在的内容块,显示上一个内容块的 *** 作.
HTML5新添加了对历史的管理，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。
通过haschange事件，可以知道URL的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的API，能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下
执行了history.pushState()方法后，新的状态信息就会被加入到历史状态栈，而浏览器地址栏也会变成新的相对URL。但是，浏览器并不会想服务器发送请求，即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，所以完全可以只传入一个空字符串即可，或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为history.pushState()方法会创建新的历史状态，所以会发现”后退”按钮也可以使用了。按下”后退”按钮，会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下
更新状态直接更新当前地址栏的内容，他不会产生后退 *** 作，只是单纯修改当前地址。
要更新当前历史状态，可以调用replaceState()，传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态，只会重写当前状态。小例子如下
网上例子：
他这个还是创建了一个数组，然后把生成的内容存到数组中，在根据传的值
把数组对应的内容给读出来。
history有个问题是第一次点击是无效的，只有第二次才能起作用。这就非常的不爽了。
通常我们也不会需要他执行特别复杂的 *** 作，反而是hash非常的好用。
hash是直接在url后面加一个#，然后立即可以被onpopstate事件检测到。
于是我们可以这样去做：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）