最近有个项目：

    存静态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. CF785D Anton and School - 2 解题报告

    CF785D Anton and School - 2 题意:给定一个长度\(\le 2 \times 10e5\)由'('和')'组成的字符串,问有多少个子串(可以不连续),前半部分是由\('('\ ...

  2. 「CodePlus 2017 12 月赛」可做题2（矩阵快速幂+exgcd+二分）

    昨天这题死活调不出来结果是一个地方没取模,凉凉. 首先有个一眼就能看出来的规律... 斐波那契数列满足$a_1, a_2, a_1+a_2, a_1+2a_2, 2a_1+3a_2, 3a_1+5a_ ...

  3. 【翻译】InterlockedIncrement内部是如何实现的？

        Interlocked系列函数可以对内存进行原子操作,它是如何实现的?     它的实现依赖于底层的CPU架构.对于某些CPU来说,这很简单,例如x86可以通过LOCK前缀直接支持Interl ...

  4. java Ftp上传创建多层文件的代码片段

    StringBuilder sBuilder = new StringBuilder();            String[] pah = path.split("/");   ...

  5. 多线程中join方法的含义

    1.作用:调用这个方法的时候,主进程会在这里停住,等待该线程进行完毕再继续往下执行. 如:不使用join的情况: <?php class Join extends Thread { public ...

  6. WPF系列之二：解耦View层控件事件与ViewModel层事件的响应

    以前的做法: 1.当项目的时间比较紧迫的时候,对UI层中控件的事件的处理,往往采取的是类似Winform中最简单的做法,直接做一个事件的Handler直接去调用VM层的方法. 2.控件只有一个Comm ...

  7. Socket初识2

    一.Socket一些概念 sk = socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) 1.1 参数1:Socket Families(地址簇) / ...

  8. ORACLE创建用户,建表空间,授予权限

    1.创建用户表空间 CREATE TABLESPACE my_tsLOGGINGDATAFILE 'D:\app\win7\oradata\orcl\my_ts.dbf' SIZE 10M AUTOE ...

  9. jquery validate submitHandler 提交导致死循环

    dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$(' ...

  10. HashMap源码翻译

    /* * Copyright (c) 1997, 2013, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETA ...