如何处理浏览器前进后退

GenweiWu commented 6 years ago

场景

实现一个类似左侧树，右侧页面的页面，右侧页面是一个iframe；通过点击左侧的不同按钮，右侧展示不同页面。

问题

比如先点击按钮1，右侧展示iframe为333.html 再点击按钮2，右侧展示iframe为444.html 再点击按钮3，右侧展示iframe为555.html

这个时候，你点击回退按钮，会发现iframe页面回到444.html 再点击回退，iframe页面回退到333.html （这些是浏览器自动记录历史自动支持的）

但是，你想做到回退的时候，左侧按钮也定位到对应按钮，却不好实现？

难点

你会发现，点击回退按钮，虽然iframe内容会改变，但是iframe的src根本不会改变。 虽然onload事件仍然会触发，但是js中读取src也是不变的

规避方法

当前参考的实现是，既然没法去有效监听iframe的src的改变，那么就在每个iframe的页面中，加载一个js方法去做这个动作。参考下方演示中控制台打印的内容！

GenweiWu commented 6 years ago

demo测试说明

demo的效果

先进入111.html页面，有个链接可以进入222.html页面。进入222.html页面，有三个按钮，点击可以分别进入333.html、444.html、555.html

historydemo

GenweiWu commented 6 years ago

demo代码

说明：由于js中使用了parent，直接访问测试会有跨域问题，需要用服务器进行访问，参考： https://stackoverflow.com/a/21608670/6182927

比如python3

python3 -m http.server
或
python -m http.server

111.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title 111</title>
</head>
<body>
    <h1>hello 111</h1>
    <a href="./222.html">link 222</a>
</body>
</html>

222.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title 222</title>
</head>
<body>
    <h1>hello 222</h1>

    <div>
        <a onclick="gotoPage('./333.html')" href="javascript:void(0);">link 333</a>
        <a onclick="gotoPage('./444.html')" href="javascript:void(0);">link 444</a>
        <a onclick="gotoPage('./555.html')" href="javascript:void(0);">link 555</a>
    </div>
    <iframe id="iframeId" src=""></iframe>
</body>
<script type="text/javascript">
    function gotoPage(_page){
        document.getElementById("iframeId").src = _page;
    }
    function show(_msg){
        console.log("parent receive:"+_msg);
    }
</script>
</html>

333.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title 333</title>
</head>
<body>
    <h1>hello 333</h1>

</body>
<script type="text/javascript">
    parent.show("333");
</script>
</html>

444.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title 444</title>
</head>
<body>
    <h1>hello 444</h1>

</body>
<script type="text/javascript">
    parent.show("444");
</script>
</html>

555.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title 555</title>
</head>
<body>
    <h1>hello 555</h1>

</body>
<script type="text/javascript">
    parent.show("555");
</script>
</html>

GenweiWu commented 6 years ago

参考

http://www.webdeveasy.com/back-button-behavior-on-a-page-with-an-iframe/

GenweiWu / Blog