最近有个项目：

    存静态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. 【入门OJ】2003: [Noip模拟题]寻找羔羊

    这里可以复制样例: 样例输入: agnusbgnus 样例输出: 6 这里是链接:[入门OJ]2003: [Noip模拟题]寻找羔羊 这里是题解: 题目是求子串个数,且要求简单去重. 对于一个例子(a ...

  2. bzoj4569: [Scoi2016]萌萌哒（ST表+并查集）

    好喵喵的题 将一个要求用ST表分割成logn个要求,如果把f[i][j]和f[u][v]在同一个集合,那么f[i][j-1]和f[u][v-1],f[i+2^(j-1)][j-1]和f[u][u+2^ ...

  3. Hdu3223 Decrypt Messages

    Decrypt Messages Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. navicat for mysql 导出数据的坑

    navicat 选择转储结构和数据的时候,生成的 sql 文件会比较大,因为每一条数据都会生成一条 sql 语句,所以会导致 使用 source 还原的时候会很慢很慢很慢, 而使用 mysqldump ...

  5. Qt ------ 判断运行在何种系统下

    #ifdef Q_OS_WIN // Windows上的代码 #endif #ifdef Q_OS_LINUX // Linux上的代码 #endif #ifdef Q_OS_MAC // Mac上的 ...

  6. 「Python-Django」Django中使用数据库的 9 个小技巧

    Django 中使用数据库的 9 个小技巧. 1. 过滤器聚合 在 Django 2.0 之前,如果你想得到“用户总数”.“活跃用户总数”等信息时,你不得不使用条件表达式. Django 2.0 中, ...

  7. Ubuntu 火狐浏览器中，鼠标选择文字被删除的解决办法

    copy from :http://blog.csdn.net/shadow066/article/details/50628019 在终端中输入命令:ibus-setup 将 “在应用程序窗口中启用 ...

  8. ZOJ 3964 NIM变形

    LINK 题意:n堆石子,Alice 和 Bob 轮流取石子,谁不能再取或被对方取完为败.但是对于alice拥有限制:b=0此堆正常无限制:b=1此堆Alice只能取奇数个石子:b=2只能取偶数个石子 ...

  9. [洛谷P2750] [USACO5.5]贰五语言Two Five

    洛谷题目链接:[USACO5.5]贰五语言Two Five 题目描述 有一种奇怪的语言叫做"贰五语言".它的每个单词都由A-Y这25个字母各一个组成.但是,并不是任何一种排列都是一 ...

  10. 在vm上面安装Linux系统

    1 在vm上面安装Linux系统 1  以管理员的身份运行VMware:  点击VM图标然后右键属性 ,点兼容性 ---特权 等级 选择 以管理员的身份运行此软件          2 . 添加一个虚 ...