JS 刷新保持iframe页面并支持浏览器前进后退

这篇具有很好参考价值的文章主要介绍了JS 刷新保持iframe页面并支持浏览器前进后退。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考资料

  1. html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
  2. 击按钮切换iframe的src,这个路径如何不会被记录到history中?
  3. iframe 后退 浏览器history 问题
  4. ajax与HTML5 history pushState/replaceState实例


一. 遇到的问题

我们使用iframe嵌套自己系统的页面,但是浏览器刷新之后,无法保持当前打开的页面

JS 刷新保持iframe页面并支持浏览器前进后退


二. 问题分析

⏹原因
之所以会刷新页面后无法保持住当前打开的页面,是因为浏览器地址栏的url始终是固定的,我们打开的页面改变的是iframe标签的src属性值,从而实现不同页面之间的切换。

⏹解决
在url的后面添加?name=当前画面id,当我们进入页面之后,根据name的参数值,来改变iframe标签,从而实现刷新后页面保持。


三. 代码示例

⏹登录页面,点击后登录到系统的首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="login">点击登录系统</button>
</body>
<script>
    login.addEventListener("click", function() {
        location.replace("./03-2-系统页面.html?name=home");
    });
</script>
</html>

⏹主系统页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #contanier {
            display: flex;
            justify-content: space-between;
        }
        iframe {
            /* 根据视口的宽度和高度计算iframe的宽和高 */
            width: calc(100vw - 150px);
            height: calc(100vh - 30px);
        }
    </style>
    <title>系统首页</title>
</head>
<body>
    <div id="contanier">
        <div id="menu">
            <li id="es6">ES6网站</li>
            <li id="css">css网站</li>
            <li id="java">java网站</li>
            <li id="php">php网站</li>
        </div>
        <div id="content">
            <iframe></iframe>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
	// 页面的工具类
    class Utils {
		
		// 模拟从后台获取到的菜单栏以及其url
        static urlMap = new Map([
            ['es6', './03/02-es6.html'],
            ['css', './03/03-css.html'],
            ['java', './03/04-java.html'],
            ['php', './03/05-php.html'],
            ['home', './03/01-首页.html']
        ]);

        // 获取本页面不含参数的url
        static getUrl() {

            const {
                origin,
                pathname
            } = location;

            return origin + pathname;
        }

        // 获取url中指定的参数
        static getParamFromUrl(url, param) {
            return new URLSearchParams(new URL(url).search).get(param);
        }
    }

    $(function() {

        // 事件绑定
        eventBind();

        // 加载页面
        loadPage();
    });

    function eventBind() {

        // 当浏览器前进后退时,会触发popstate事件
        window.addEventListener("popstate", function(evnet) {
            loadPage();
        });

        $("#menu li").click(function(event, triggerFlg) {

            const pageId = this.id;
            reloadIframe(pageId);

            /*
                如果是用户手动点击触发,则将当前url添加到浏览器的history中
                如果是通过函数来触发的点击事件,则不将url添加到浏览器的history中
            */
            if(!triggerFlg) {
                history.pushState(null, "", `${Utils.getUrl()}?name=${pageId}`);
            }
        });
    }

    function loadPage() {
        
        const pageId = Utils.getParamFromUrl(location.href, "name");
        
        // 如果url中没有 ?name=对应的属性值,或者Utils.urlMap中没有pageId对应值的话
        if(!pageId || !Utils.urlMap.get(pageId)) {
            // 将当前 url + ?name=home 的路径替换到浏览器的history中
            history.replaceState(null, "", `${Utils.getUrl()}?name=home`);
            // 重载页面,此时url中的参数为?name=home
            loadPage();
            return;
        }
        
        // 如果当前是home页的话,就重载iframe标签
        if(pageId == "home") {
            reloadIframe(pageId);
            return;
        }

        /*
            手动触发点击事件
            第二个参数是为了在手动触发点击事件的时候传递一个参数
            传递此参数的目的是为了让点击事件的回调区分,当前点击事件是用户主动点击触发,
            还是通过函数来手动触发的
        */
        $("#" + pageId).trigger("click", true);
    }

    function reloadIframe(pageId) {
		
		// 或者可以用这种方式
		// document.querySelector("iframe").contentWindow.location.replace(Utils.urlMap.get(pageId));
		
        // 清空iframe标签
        $("#content").empty();
        
        // 创建新的iframe标签,并指定url
        $("<iframe>", {
            src: Utils.urlMap.get(pageId)
        }).appendTo($("#content"));
    }
</script>
</html>

四. 代码分析

  • reloadIframe方法中,我们并不是直接修改的iframe标签的src属性,而是销毁掉既存的iframe标签,并新创建一个。如果直接修改src属性的话,src中的地址会直接存入history对象中,给浏览器前进后退功能带来影响。直接创建iframe标签,src中的地址并不会写入history对象中。
  • 除了新创建iframe标签之外,我们还可以通过直接调用iframe标签内部的window对象中的location.replace()方法来实现地址切换。
  • 由于新创建的iframe标签的src属性值并不会存入history对象中,因此我们需要手动调用history.pushState()这个api来存入到history对象中。
  • $("#menu li")上的点击事件可由用户主动点击触发,也可由window上的popstate事件手动触发,当是由popstate事件手动触发时,说明用户使用了浏览器的前进后退功能,此时不需要将url存储history中。

五. 效果

JS 刷新保持iframe页面并支持浏览器前进后退文章来源地址https://www.toymoban.com/news/detail-487304.html

到了这里,关于JS 刷新保持iframe页面并支持浏览器前进后退的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS监听浏览器关闭、刷新及切换标签页触发事件

    蛮简单的东西,知道就会,不知道就不会,没什么逻辑可言。简单记录一下,只为加深点儿印象。 visibilitychange visibilitychange可以监听到浏览器的切换标签页。  直接上代码:  beforeunload  beforeunload可以监听到页面的关闭,页签切换不会触发 关闭浏览器窗口的时候触发 通过点

    2024年02月08日
    浏览(54)
  • VSCode中修改HTML代码无法实时刷新到浏览器页面的问题解决

    天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。 首先下载Live Sever 插件 参考:https://blog.csdn.net/mo_sss/article/details/132321681 下载后重启VS

    2024年02月22日
    浏览(44)
  • js控制浏览器前进、后退、页面跳转

    在JavaScript中,你可以使用  window  对象的  history  对象来控制浏览器的历史记录。以下是一些常用的方法: 前进和后退 : window.history.forward() : 前进到历史记录中的下一个页面。 window.history.back() : 返回历史记录中的上一个页面。 window.history.go(n) : 跳转到历史记录中的指定页

    2024年01月20日
    浏览(43)
  • Vue3 - 实现路由 “新开一页“ 进行页面跳转功能,Router 路由跳转时在新窗口打开页面(网站跳转页面时浏览器新开页签打开网页,支持在页面、纯 js/ts 文件中使用,详细示例代码教程)

    网上这方面教程很少,本文提供多种解决方案,适用于任何场景。 本文 实现了在 vue3 项目开发中,当页面跳转时浏览器打开新窗口(新页签)跳转,Router 路由跳转并新开一页教程, 无论您是在普通页面、纯 js/ts 文件中,都可以使用, 如下图所示,当执行路由跳转时浏览器

    2024年02月03日
    浏览(66)
  • 使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器

    主要代码如下 使用 技术点说明 navigator.userAgent.toLowerCase() UserAgent 只读属性返回当前浏览器的用户代理字符串。 先看在 谷歌浏览器 控制台打印的结构: ‘mozilla/5.0 (iphone; cpu iphone os 13_2_3 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.0.3 mobile/15e148 safari/604.1’ 主要判断移

    2024年02月12日
    浏览(43)
  • python 使用selenium时如何保持浏览器内网站保持登陆状态

    user-data-dir的路径你可以这样找 打开自己的浏览器,进入chrome://version/ 页面内写到**“个人资料路径 ”**,后面有一个路径 把这个路径拷贝到add_argument的user-data-dir里面就可以了 另外还有一个坑:chrome driver和chrome版本必须要对应才能运行。 所以建议在项目期间不要随便升级浏

    2024年02月03日
    浏览(61)
  • unity 浏览器插件【embedded browser(原zfbrowser)】简单教程,使unity支持web h5页面,附软件下载链接

    这是个在项目中使用了很久的浏览器插件。 很负责任的说这是在pc平台上最好用的浏览器插件 商业付费价格78刀,相比3d webview等插件动不动就178、368的价格就显得很良心 最新版下载链接(请勿商用) 1.1 功能概述 基本和普通浏览器无异 支持调试台Devtools功能 支持evil js 支持

    2024年02月05日
    浏览(59)
  • html浏览器进行缩放百分比 界面和文字保持不变

    400%效果 50%效果

    2024年02月03日
    浏览(51)
  • Edge 浏览器设置自动刷新

    要在 Microsoft Edge 浏览器中设置自动刷新,您可以使用第三方扩展来实现这一功能。目前,Edge 浏览器本身并没有内置的自动刷新功能。以下是启用自动刷新的一般步骤: 打开 Microsoft Edge 扩展商店:首先,在 Edge 浏览器中打开扩展商店。您可以通过点击浏览器右上角的三个水

    2024年02月02日
    浏览(170)
  • Edge浏览器设置自动刷新

    你可以在 Edge 的扩展商店中搜索并安装这些扩展。以下是一些常见的扩展: Super Auto Refresh: 提供了强大的自动刷新功能,可以根据自定义的时间间隔进行刷新。 Auto Refresh: 允许你设置页面刷新的间隔。 Edge 浏览器的开发者工具中也有自动刷新的选项: 打开开发者工具:按 F

    2024年02月02日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包