最近有个项目：

    存静态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. Unity3D手游开发日记(5) - 适合移动平台的植被随风摆动

    一直在思考怎么让场景更有生机,我觉得植被的随风摆动是必不可少的.CE3引擎的植被bending就做得特别棒.我也准备在手机上做一套. 先分析一下植被摆动常见的几种做法.其实不管哪种做法,核心就是让植被 ...

  2. 洛谷 P4503 [CTSC2014]企鹅QQ 解题报告

    P4503 [CTSC2014]企鹅QQ 题目背景 PenguinQQ是中国最大.最具影响力的SNS(Social Networking Services)网站,以实名制为基础,为用户提供日志.群.即 ...

  3. 洛谷P1455 搭配购买

    题目描述 明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某个网站上有卖云朵的,小朋友们决定一同前往去看看这种神奇的商品,这个店里有n朵云,云朵已经 ...

  4. gflag使用

    #include <gflags/gflags.h> #include <iostream> // 声明全局flag DEFINE_bool(my_bool, false, & ...

  5. Centos7单机部署ELK

    一. 简介 1.1 介绍 ELK是三个开源工具组成,简单解释如下: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风 ...

  6. 2-sat基础题 BZOJ 1823

    http://www.lydsy.com/JudgeOnline/problem.php?id=1823 1823: [JSOI2010]满汉全席 Time Limit: 10 Sec  Memory ...

  7. [转]memmove、memcpy和memccpy

    原文地址:http://www.cppblog.com/kang/archive/2009/04/05/78984.html 在原文基础上进行了一些小修改~ memmove.memcpy和memccp ...

  8. SpringCloud（四）服务发现与消费：以ribbon为例

    说明: ribbon是spring-cloud中作为服务消费者的一种角色,客户端可以通过它来对服务提供者的服务进行消费, 比如本例中是服务提供者注册到注册中心,服务提供者提供了一个服务接口,返回一个h ...

  9. iframe子夜页面调父页面的方法 取父页面的值

    1.调父页面的方法的写法 window.parent.yincang();//yincang()是父页面的一个方法 2.取父页面的值的写法 window.parent.document.gettEle ...

  10. yii2 自动登录解读

    今日遇到一个需要将当前用户,全部登出系统(YII2框架制作)重新登录的需求 仔细回忆一遍,Yii2的登录流程,竟然有些不太明白,于是下午空闲时 重新看了下Yii2的用户登录源码 文件位于YII2项目下 ...