【求思路】不同链接访问同一地址显示不同页面

如下:

http://www.aaa.com/index.html   ——》访问默认页面
http://www.aaa.com/index.html?keyid=111    ——》访问特别页面1
http://www.aaa.com/index.html?keyid=222  ——》访问特别页面2

clipboard.png

clipboard.png

clipboard.png

阅读 4.1k
4 个回答

参考链接:https://www.cnblogs.com/mamim...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }


        #wrap {
            width: 100%;
            height: 100%;
        }

        #wrap img {
            display: block;
            width: 200px;
            height: 250px;
        }
    </style>
</head>

<body>
    <div id="wrap"></div>
    <script type="text/x-template" id="bt1">
        <img id="bt1" src="./19034_en_1.jpg" v-show="bt1">bt1</img>

    </script>
    <script type="text/x-template" id="bt2">
        <img id="bt2" src="./微信截图_20190517093326.png">bt2</img>
</script>
    <script type="text/x-template" id="bt3">
        <img id="bt3" src="./微信截图_20190517093420.png">bt3</img>

    </script>


    <script>
        function getQueryString(name) {
            var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
            if (result == null || result.length < 1) {
                return "";
            }
            return result[1];
        }
        var params = parseInt(getQueryString('id'));
        switch (params) {
            case 5:
                document.getElementById('wrap').innerHTML = document.getElementById('bt1').innerHTML;
                break;
            case 1:
                document.getElementById('wrap').innerHTML = document.getElementById('bt2').innerHTML;
                break;
            case 2:
                document.getElementById('wrap').innerHTML = document.getElementById('bt3').innerHTML;
                break;
        }
    </script>

</body>

</html>

这种写在页面的会使整个文件变大,又一番查询发现可以用jquery的load实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="wrap"></div>
  

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function getQueryString(name) {
            var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
            if (result == null || result.length < 1) {
                return "";
            }
            return result[1];
        }
        var params = parseInt(getQueryString('id'));
        switch (params) {
            case 5:
                $('html').load("./demo.html");
                break;
           
        }
    </script>

</body>

</html>

demo.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
  <title>my-project</title>
  <style>
    #app {
      width: 200px;
      height: 200px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div id="app"></div>
</body>

react的话,可以根据router里面的key,render不同的内容. 纯html开发应该也是类似的吧

你可以把页面定义为一个壳子...打开的时候拿一下参数...外面壳子都是同一个...渲染参数值对应内容就可以了...

vue的话 获取 url参数 展示不同组件就行了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题