这篇文章是自己在项目中遇到，同时参考了网上的资料，作为笔记参考使用

一、页面之间的传值

1、使用cookie传值

封装简单使用：

//获取cookie
function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg)){
        return unescape(arr[2]);
    }
    else{
        return null;
    }
}
//删除cookie
function delCookie(name){
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCookie(name);
  if(cval!=null){
    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
  }
}

//设置cookie
function setCookie(name,value){
  var Days = 1;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

js使用cookie

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

获取cookie

var x = document.cookie;

删除cookie

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

2、使用localStorage

localStorage.setItem('myCat', 'Tom');      //设置

let cat = localStorage.getItem('myCat');    //获取

localStorage.removeItem('myCat');    //删除

localStorage.clear();   //删除所有

3、通过url传递参数的方式

该案例也是从a.html向b.html页面传递参数

1. a.html的代码

1 2	`<input type=` `"text"` `value=` `"猜猜我是谁"` `>` `<button onclick=` `"jump()"` `>跳转</button>`

2.点击跳转按钮可以将input标签的value值传递到b.html

 
         function 
         jump() { 
        
         var 
         s = document.getElementsByTagName( 
         'input' 
         )[0]; 
        
         location.href= 
         '7.获取参数.html?' 
         + 
         'txt=' 
         + encodeURI(s.value); 
        
         }

3. b.html中的代码

 
         <div id= 
         "box" 
         ></div> 
        
         var 
         loc = location.href; 
        
         var 
         n1 = loc.length; 
        
         var 
         n2 = loc.indexOf( 
         '=' 
         ); 
        
         var 
         txt = decodeURI(loc.substr(n2+1,n1-n2)); 
        
         var 
         box = document.getElementById( 
         'box' 
         ); 
        
         box.innerHTML = txt;

二、父子页面方法的调用一级获取元素

js/jquery如何获取获取父窗口的元素

1、$("#父窗口元素ID",window.parent.document);

对应javascript版本为

window.parent.document.getElementById("父窗口元素ID");

取父窗口的元素方法：

$(selector, window.parent.document);

取父窗口的父窗口的元素就可以用：

$(selector, window.parent.parent.document);

类似的，取其它窗口的方法大同小异
获取iframe父窗体元素：

$(selector, window.parent.document);

获取通过windows.open()打开的父窗体：

$(selector, window.opener.document);

获取通过 showModelDialog()打开的父窗体：

$(selector, window.dialogArguments.document);

用于刷新父窗口整个页面：

window.parent.location.reload();

window插件关闭窗口,类似于window.close()：

parent.subWindow_add.Close();

刷新父页面中的id为“4thEditTable”的列表（局部刷新）：

parent.$("#4thEditTable").load(window.parent.location.href+" #4thEditTable");

来源：oschina

链接：https://my.oschina.net/u/4404259/blog/3330202

标签

html5

javascript

mycat

html页面之间的传值，获取元素和方法的调用

js/jquery如何获取获取父窗口的元素