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

来源：互联网发布：csgo弹道优化参数脚本编辑：程序博客网时间：2024/05/02 06:39

在项目中遇到需要把内容做静态化处理，只加载一个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>

其中js部分，getUrlVars() 方法是获取url中的language参数值，根据具体的参数值决定加载什么语言的内容。

阅读全文

0 0