使用Javascript通过菜单创建HTML动态页面

时间:2015-01-25 08:06:49

标签: javascript jquery html dom web-applications

我有一个网站应用程序,其中包含一个包含菜单的html页面

当我按下按钮时,显示必须执行哪个动作的参数添加到url

ex ... html?action = show-charts

我希望通过使用JS读取这些参数,为每个实例动态创建页面主体

我想到了那样的事情

html代码:

<html>
    <head>

        <title>Bull Stock | Home</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    </head>
    <body onload="updateBodyOnAction()">
        <script>
            function getUrlValue(VarSearch){
                var SearchString = window.location.search.substring(1);
                var VariableArray = SearchString.split('&');

                for(var i = 0; i < VariableArray.length; i++){
                    var KeyValuePair = VariableArray[i].split('=');
                    if(KeyValuePair[0] === VarSearch){
                        return KeyValuePair[1];
                    }
                }
            }
        </script>
        <script>
        function updateBodyOnAction() {
                  if(window.location.toString().indexOf("?") > -1){
                        var action = getUrlValue("action");

                        if(action.valueOf() === "show-charts"){
                            document.write("<h1 align=\"center\">CHARTS!</h1>"+
                                    "<p align=\"center\">More Charts!</p>");
                        }

                  }
              }
        </script>
    </body>
</html>

OR

使用方法appendChild()

但我想知道这是否正确,是否有更好的方法来做或改进这个

0 个答案:

没有答案