As a follow-up question to: Most efficient way to do a horizontal sliding layout, is it possible to make the browser's back and forward button work when using a single page layout like that?
作为一个后续问题:最有效的水平滑动布局方式,在使用单一页面布局时,可以让浏览器的后退和前进按钮工作吗?
3 个解决方案
#1
5
You can use the history API in HTML5 to achieve that.
您可以使用HTML5中的history API来实现这一点。
Here are a few resources to get you started:
以下是一些让你开始的资源:
- http://diveintohtml5.info/history.html
- http://diveintohtml5.info/history.html
- http://html5demos.com/history
- http://html5demos.com/history
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
To get support in older browsers as well, there are JavaScript libraries that enable that:
为了在更老的浏览器中获得支持,有一些JavaScript库支持:
- https://github.com/browserstate/History.js/
- https://github.com/browserstate/History.js/
Advanced example by the Chrome team, that uses the history API:
使用历史API的Chrome团队的高级示例:
- http://www.20thingsilearned.com/en-US
- http://www.20thingsilearned.com/en-US
#2
2
Yes, you can use HTML5 history API to implement it.
是的,您可以使用HTML5历史API来实现它。
- Demo: http://html5demos.com/history
- 演示:http://html5demos.com/history
- Docs: http://diveintohtml5.info/history.html
- 文档:http://diveintohtml5.info/history.html
#3
0
In older way, you can try to use bookmark, e.g.
用较旧的方式,你可以试着使用书签。
<html>
<head>
<script type="text/javascript">
function goPage (v) {
var idisplay = v == 'i',
adisplay = v == 'a',
bdisplay = v == 'b';
document.getElementById('anchor_i').style.display = idisplay? 'none' : 'block';
document.getElementById('anchor_a').style.display = adisplay? 'none' : 'block';
document.getElementById('anchor_b').style.display = bdisplay? 'none' : 'block';
document.getElementById('content_i').style.display = idisplay? 'block' : 'none';
document.getElementById('content_a').style.display = adisplay? 'block' : 'none';
document.getElementById('content_b').style.display = bdisplay? 'block' : 'none';
}
</script>
</head>
<body>
<a name="index"></a>
<div id="content_i">
index
</div>
<a id="anchor_i" href="#index" onclick="goPage('i');" style="display: none">to index</a>
<a id="anchor_a" href="#page_a" onclick="goPage('a');">to page_a</a>
<a id="anchor_b" href="#page_b" onclick="goPage('b');">to page_b</a>
<a name="page_a"></a>
<div id="content_a" style="display: none">
page a
</div>
<a name="page_b"></a>
<div id="content_b" style="display: none;">
page b
</div>
</body>
</html>
#1
5
You can use the history API in HTML5 to achieve that.
您可以使用HTML5中的history API来实现这一点。
Here are a few resources to get you started:
以下是一些让你开始的资源:
- http://diveintohtml5.info/history.html
- http://diveintohtml5.info/history.html
- http://html5demos.com/history
- http://html5demos.com/history
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
To get support in older browsers as well, there are JavaScript libraries that enable that:
为了在更老的浏览器中获得支持,有一些JavaScript库支持:
- https://github.com/browserstate/History.js/
- https://github.com/browserstate/History.js/
Advanced example by the Chrome team, that uses the history API:
使用历史API的Chrome团队的高级示例:
- http://www.20thingsilearned.com/en-US
- http://www.20thingsilearned.com/en-US
#2
2
Yes, you can use HTML5 history API to implement it.
是的,您可以使用HTML5历史API来实现它。
- Demo: http://html5demos.com/history
- 演示:http://html5demos.com/history
- Docs: http://diveintohtml5.info/history.html
- 文档:http://diveintohtml5.info/history.html
#3
0
In older way, you can try to use bookmark, e.g.
用较旧的方式,你可以试着使用书签。
<html>
<head>
<script type="text/javascript">
function goPage (v) {
var idisplay = v == 'i',
adisplay = v == 'a',
bdisplay = v == 'b';
document.getElementById('anchor_i').style.display = idisplay? 'none' : 'block';
document.getElementById('anchor_a').style.display = adisplay? 'none' : 'block';
document.getElementById('anchor_b').style.display = bdisplay? 'none' : 'block';
document.getElementById('content_i').style.display = idisplay? 'block' : 'none';
document.getElementById('content_a').style.display = adisplay? 'block' : 'none';
document.getElementById('content_b').style.display = bdisplay? 'block' : 'none';
}
</script>
</head>
<body>
<a name="index"></a>
<div id="content_i">
index
</div>
<a id="anchor_i" href="#index" onclick="goPage('i');" style="display: none">to index</a>
<a id="anchor_a" href="#page_a" onclick="goPage('a');">to page_a</a>
<a id="anchor_b" href="#page_b" onclick="goPage('b');">to page_b</a>
<a name="page_a"></a>
<div id="content_a" style="display: none">
page a
</div>
<a name="page_b"></a>
<div id="content_b" style="display: none;">
page b
</div>
</body>
</html>