前端 页面无刷新方案二

开始方案二 用html5 history.pushState(state,null,url); （IE9及以下版本不支持）

View Code
再加上几个测试页面

测试页面1

View Code
测试页面2 page2.htm，里面加了一个跳转，因为我们已经拦截a标签的跳转，所以我们也能实现hash跳转

View Code
测试页面3 page3.htm page3.css 引入了一个外链css文件，这里要重点说明一下。我们在这里引入了css3，页面顺利加载了page3.css文件,page3.htm 的样式得以改变，

紧接着我们再回到page2.htm.但是刚才的page3.css的样式没影响到page2.htm。这里是个要注意的问题了，说明样式文件是会被自动移除的，这和页面的样式表重新渲染相符。

View Code

.test3{display: block; width: 170px;height: 200px;background-color: #fb9876}

测试页面4 page4.htm。 这里直接进来可以顺利触发fun4的方法

View Code
测试页面5 page5.htm 这里可以顺利执行document.body.onload方法 且执行本页的 $(function(){})方法体

View Code
测试页面6 page6.htm page6.js

View Code
View Code
最后你会发现，文件不管是外链js 还是内页js, 都会被存放在 index.htm。这可能会带来一些不好跟踪的问题

在做这个时候的时候可以脑补一下 htm页面渲染过程css和js的加载流程。

也顺便发现了一下其他该注意的问题

1、inline-table inline-block 4px间距问题

2、ajax读取本地文件设置问题