最近有个项目：

    存静态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. BZOJ3527：[ZJOI2014]力——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=3527 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi,求Ei. 参考:https://ww ...

  2. NOIP2016天天爱跑步 题解报告【lca+树上统计(桶)】

    题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.«天天爱跑步»是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游戏的地图可以看作一一棵包含 nn个 ...

  3. 谷哥的小弟学前端(02)——HTML常用标签（2）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  4. Codeforces Round #415 (Div. 2) A B C 暴力 sort 规律

    A. Straight «A» time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  5. 手脱PE Pack v1.0

    1.PEID查壳 PE Pack v1.0 2.载入OD,一上来就这架势,先F8走着 > / je ; //入口点 -\E9 C49D0000 jmp Pepack_1.0040D000 004 ...

  6. 前端PHP入门-021-重点日期函数之日期验证函数

    checkdate可以判断一个输出的日期是否有效. 在实际的工作中,我们需要经常用于检测常用于用户提交表单的数据验证. 函数的语法格式如下: bool checkdate ( int month,in ...

  7. js控制treeview默认展开

    bootStrapTreeview 在bootstrap的treeview官网,可以找到这个方法,用js控制可以写成:$('#xxx').treeview('collapseNode',{silent ...

  8. eclipse常用快捷键大全 (转)

    Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.    ...

  9. 根据wsdl的url，使用axis1.4生成客户端，并且对webservice进行调用(转)

    根据wsdl的url,使用axis1.4生成客户端,并且对webservice进行调用 axis1.4下载地址 1.到www.apache.org上去下载axis-bin-1_4.zip,如要关联源代 ...

  10. 数学：Nim游戏和SG函数

    有若干堆石子,两人轮流从中取石子,取走最后一个石子的人为胜利者 以下的性质是显然的 .无法移动的状态是必败态 .可以移动到必败态的局面一定是非必败态 .在必败态做所有操作的结果都是非必败态 在普通Ni ...