Native js dynamically displays static page content according to url parameters

In the project, we need to do static processing for the content, only loading an h5 page can display the content, instead of loading resource files such as. css or. js to improve the page loading speed. The static content displayed on the page can be divided into three languages, so it needs to be processed dynamically.

For example, the url is domain name + / problem1.html, and the language parameter determines the content of the specific language to be loaded.

Chinese: domain name + / problem1.html?language=Chinese / / Chinese is displayed by default
 English: domain name + / problem1.html?language=English
 Traditional Chinese: domain name + / problem1.html?language=TraditionalChinese

The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Feedback processing measures</title>
    /*Mobile adaptation*/
    <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;'>Turn off and restart the phone automatically?</span>";
                document.getElementById("uu").innerHTML = " <li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;letter-spacing: 1px;'>" + "Generally, third-party security software and anti-virus software are easy to cause data conflicts. After uninstalling such software, restart it and observe whether the mobile phone is normal." + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "It is recommended to restore the phone to factory settings after backing up important data, and use the phone for a period of time to see whether it is normal without restoring data." + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "If the above methods are invalid, it is recommended that you contact customer service or go to after-sales outlets for testing." + "</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;'>Turn off and restart the phone automatically?</span>";
                document.getElementById("uu").innerHTML = " <li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "Generally, security software and anti-virus software of third-party manufacturers are prone to data conflicts. After uninstalling such software, restart it and observe whether the mobile phone is normal." + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "It is recommended to restore the phone to factory settings after backing up important data, and use the phone for a period of time to see whether it is normal without restoring data." + "</li><br>" +
                        "<li style='color: rgb(149, 149, 149); font-size: 13px;letter-spacing: 1px;'>" + "If the above methods are invalid, it is recommended that you contact customer service or go to after-sales outlets for testing." + "</li>";
            default :
            //If the parameter is not any of the three types, do specific processing, such as display Chinese content
                break;
        }
    };
</script>
</html>

In the js part, the getUrlVars() method gets the language parameter value in the url, and determines what language content to load according to the specific parameter value.

Tags: Mobile network

Posted on Mon, 04 May 2020 13:54:33 -0700 by estan