最近有个项目：

    存静态web服务，一个新闻页面列表出所有新闻摘要信息，然后通过点击新闻详情访问到该新闻的详情页面；

    新闻展示的页面通过ajax请求接口获取到新闻的摘要信息，预计想通过id的方式访问到新闻详情页面；

    如果动态实现跳转非常简单，静态文件跳转。。。想了一下是否能实现在静态文件的后面加上请求的id呢？比如动态情况http://news.com/?new_id=1；

    静态请求src="news_content.html?new_id=1"

    最后查资料还是能实现的；

特别声明：Post.html和Read.html文件在同一级目录下

1. 请求页面(新闻列表页面)

Post.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

代码如下:

<a href="Read.html?art_id=1">静态传值</a>

</body>

</html>

2. 跳转静态的页面(新闻详情页面)

Read.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    UrlParm = function () { // url参数

        var data, index;

        (function init() {

            data = [];

            index = {};

            var u = window.location.search.substr(1);

            if (u != '') {

                var parms = decodeURIComponent(u).split('&');

                for (var i = 0, len = parms.length; i < len; i++) {

                    if (parms[i] != '') {

                        var p = parms[i].split("=");

                        if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p=

                            data.push(['']);

                            index[p[0]] = data.length - 1;

                        } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c | =

                            data[0] = [p[1]];

                        } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa

                            data.push([p[1]]);

                            index[p[0]] = data.length - 1;

                        } else {// c=aaa

                            data[index[p[0]]].push(p[1]);

                        }

                    }

                }

            }

        })();

        return {

            // 获得参数,类似request.getParameter()

            parm: function (o) { // o: 参数名或者参数次序

                try {

                    return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);

                } catch (e) {

                }

            },

            //获得参数组, 类似request.getParameterValues()

            parmValues: function (o) { // o: 参数名或者参数次序

                try {

                    return (typeof(o) == 'number' ? data[o] : data[index[o]]);

                } catch (e) {

                }

            },

            //是否含有parmName参数

            hasParm: function (parmName) {

                return typeof(parmName) == 'string' ? typeof(index[parmName]) != 'undefined' : false;

            },

            // 获得参数Map ,类似request.getParameterMap()

            parmMap: function () {

                var map = {};

                try {

                    for (var p in index) {

                        map[p] = data[index[p]];

                    }

                } catch (e) {

                }

                return map;

            }

        }

    }();

    var art_id = UrlParm.parm("art_id");

    console.log(art_id, '#####')

</script>

</body>

</html>

3. 要设置cookice

问题：

    这样虽然是能实现需求，不过当用户从新闻页面传参id到新闻详情页面，再次刷新，页面上一次获得id就不存在了；所有就想到是否可以将id写入到cookice中，最好是页面关闭的时候将cookice清空掉

特别提醒：要加载jquery.cookie.js文件下载地址

在刚才的Read.html页面scripts标签中进行添加代码

<script type="text/javascript" src="/web/js/jquery.cookie.js"></script>

<script type="text/javascript">

...

   var art_id = UrlParm.parm("art_id");

    console.log(art_id, '#####');

    /**设置cookice   存储3天期限***/

    $.cookie('art_id',art_id,{expires: 3,path:'/'});

    /** 获取cookice中的id */

    $.cookie('art_id');

    /**最后就是正常的ajax请求接口获取数据,然后巴拉巴拉~~~**/

</script>

页面关闭清空cookie还没搞，就先这样作为一个笔记！！！！

附加：页面关闭清空cookie没有测试不清楚是否有效

    window.onbeforeunload = function (event) {

        $.cookie('art_id', {expires: -1,path:'/'});

        var message = '...';

        if (typeof event == 'undefined') {

            event = window.event;

        }

        if (event) {

            event.returnValue = message;

        }

        return message;

    }

js实现静态页面跳转传参的更多相关文章

  1. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

  2. vue 页面跳转传参

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...

  3. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  4. 【转】request和response的页面跳转传参

    下面是一位园友的文章: jsp或Servlet都会用到页面跳转,可以用 request.getRequestDispatcher("p3.jsp").forward(request ...

  5. js中常用framesetiframe页面跳转传参方法实例大全

    logf的空间

  6. 微信小程序页面跳转传参

    1.传递参数方法   使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hov ...

  7. 微信小程序页面跳转传参方式

    //实现跳转的A页面 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?d ...

  8. 小程序页面跳转传参参数值为url时参数时 会出现丢失

    当参数的值为url的时候,  ?号   _  下划线   等等 都会被 截取掉,看不到,  这样在 另一个页面 options中  截取的url就不完全 let url="http://ba ...

  9. vue页面跳转传参

    跳转页 this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}}) 接收页 this.$route.params.参数名

随机推荐

  1. windows内核提权

    Windows by default are vulnerable to several vulnerabilities that could allow an attacker to execute ...

  2. [学习笔记]Min-25筛

    %%yyb %%zsy 一. 基本操作:筛1~N中的素数个数.n=1e9 设F(M,j)表示,2~M的所有数中,满足以下条件之一的数的个数:①x是质数②x最小质因子大于(注意是大于没有等号)$P_j$ ...

  3. android lib 存储

    存储在 /data/app-lib目录下:

  4. 【二维树状数组】【CF10D】 LCIS

    传送门 Description 给你两个串,求他们的最长公共上升子序列 Input 第一行是第一个串的长度\(n\) 第二行\(n\)个数代表第一个串 第三行是第二个串的长度\(m\) 第四行\(m\ ...

  5. Codeforces Round #416 (Div. 2)A B C 水 暴力 dp

    A. Vladik and Courtesy time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  6. Hdu1255 覆盖的面积

    覆盖的面积 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  7. 【题解】Berland.Taxi Codeforces 883L 模拟 线段树 堆

    Prelude 题目传送门:ヾ(•ω•`)o Solution 按照题意模拟即可. 维护一个优先队列,里面装的是正在运营中的出租车,关键字是乘客的下车时间. 维护一个线段树,第\(i\)个位置表示第\ ...

  8. OpenCV---ROI（region of interest）和泛洪填充

    一:ROI 感兴趣区(Region of Interest,ROIs) 是图像的一部分,它通过在图像上选择或使用诸如设定阈值(thresholding) 或者从其他文件(如矢量> 转换获得等方法 ...

  9. python---websocket的使用

    一:简介 推文:WebSocket 是什么原理?为什么可以实现持久连接? 推文:WebSocket:5分钟从入门到精通(很好) WebSocket协议是基于TCP的一种新的协议.WebSocket最初 ...

  10. Why are Eight Bits Enough for Deep Neural Networks?

    Why are Eight Bits Enough for Deep Neural Networks? Deep learning is a very weird technology. It evo ...