原生js根据url参数动态显示静态页面内容

最新推荐文章于 2024-04-03 08:45:47 发布

Simple425

最新推荐文章于 2024-04-03 08:45:47 发布

阅读量3k

点赞数 1

分类专栏： Html5

本文链接：https://blog.csdn.net/Simple425/article/details/78880482

版权

Html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在项目中遇到需要把内容做静态化处理，只加载一个h5页面就可以显示内容，而不加载.css或.js等资源文件，来提高页面加载速度。页面展示的静态内容又分三种语言，因此需要做动态处理。

例如url为：域名+/problem1.html，通过language参数决定加载具体语言的内容。

中文：域名+/problem1.html?language=Chinese//默认显示中文
英文：域名+/problem1.html?language=English
繁体中文：域名+/problem1.html?language=TraditionalChinese

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>反馈处理措施</title>
    /*手机端自适应*/
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        h4 {
            font-size: 14px;
            font-weight: normal;
            margin-left: 0px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<h4 id="h1" ></h4>
<ol id="uu" style="margin-left: -20px"></ol>
</body>
<script>
    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars["language"];
    }
    var language = "Chinese";
    window.onload=function () {
        if (getUrlVars() != undefined) {
            language = getUrlVars()
        }
        switch (language) {
            case "Chinese":
                document.getElementById("h1").innerHTML = " <span style='color: rgb(24, 24, 24); font-size: 14px;font-weight: normal;margin-left: 5px;margin-bottom: 20px;'>手机自动关机、重启？</span>";
                document.getElementById("uu").innerHTML = " <li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;letter-spacing: 1px;'>" + "一般第三方安全类软件、杀毒软件容易导致数据冲突，卸载这类软件后重启，观察手机是否正常。" + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "建议备份重要数据后将手机恢复出厂设置，不恢复数据的前提下使用一段时间看手机是否正常。" + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "若以上方法均无效，建议您联系客服或者到售后网点检测。" + "</li>";
                break;
            case "English":
                document.getElementById("h1").innerHTML = "<span style='color: rgb(24, 24, 24); font-size: 14px;font-weight: normal;margin-left: 5px;margin-bottom: 20px;'>The phone automatically shuts down and restarts.</span>";
                document.getElementById("uu").innerHTML = " <li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "General third-party security software, antivirus software easily lead to data conflict, uninstall such software after the restart, observe the phone is normal." + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "It is recommended to restore the important data after the phone to restore the factory settings, do not restore the data under the premise of using a period of time to see if the phone is normal." + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "If the above methods are invalid, we recommend that you contact customer service or to the after-sale network detection." + "</li>";
                break;
            case "TraditionalChinese":
                document.getElementById("h1").innerHTML = " <span style='color: rgb(24, 24, 24); font-size: 14px;font-weight: normal;margin-left: 5px;margin-bottom: 20px;'>手機自動關機、重啓？</span>";
                document.getElementById("uu").innerHTML = " <li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "一般協力廠商安全類軟件、殺毒軟體容易導致數據衝突，卸載這類軟件後重啓，觀察手機是否正常。" + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "建議備份重要數據後將手機恢復出廠設定，不恢復數據的前提下使用一段時間看手機是否正常。" + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "若以上方法均無效，建議您聯系客服或者到售後網點檢測。" + "</li>";
            default :
            //如果参数不是三个类型的任何一种，做具体处理，例如显示中文内容
                break;
        }
    };
</script>
</html>