html頁面之間的傳值，獲取元素和方法的調用

這篇文章是自己在項目中遇到，同時參考了網上的資料，作為筆記參考使用

一、頁面之間的傳值

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

?

1 2 3 4

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

3. b.html中的代碼

?

1 2 3 4 5 6 7

<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");