JS控制靜態(tài)頁(yè)面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年08月10日 10:51:43 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS控制靜態(tài)頁(yè)面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

在項(xiàng)目中遇到這也一個(gè)問題：

有a.html和b.html。

1.a頁(yè)面已經(jīng)打開，b頁(yè)面尚未打開，我希望在a頁(yè)面設(shè)置好一些列參數(shù)，比如背景色，寬度等參數(shù)，傳遞給b頁(yè)面，好讓b頁(yè)面在打開就能應(yīng)用。

2.a頁(yè)面已經(jīng)打開，b頁(yè)面無(wú)論是否打開。在a頁(yè)面需要獲取到b頁(yè)面的一些元素甚至變量，以便于應(yīng)用到a頁(yè)面。

注意：不涉及跨域問題。

想了很久，終于想到了解決方案。

第一個(gè)問題，我們可以利用html頁(yè)面錨點(diǎn)的特性，將參數(shù)通過url傳遞給b頁(yè)面

這是a頁(yè)面代碼：

<button>跳轉(zhuǎn)設(shè)置</button> 
 <script> 
 var btn = document.querySelector('button'); 
 console.log(window); 
  
 btn.addEventListener('click', function(){ 
 window.location = 'ci.html#bgc=#369?wd=500' 
 }) 
 </script>

由代碼可以知道，點(diǎn)擊按鈕跳轉(zhuǎn)頁(yè)面，跳轉(zhuǎn)的url后面多了一系列參數(shù)，這個(gè)并不會(huì)影響跳轉(zhuǎn)的地址，當(dāng)b頁(yè)面打開后，可以獲取location截取字符串獲得變量及變量值，再進(jìn)行應(yīng)用。

這是b頁(yè)面代碼：

<div></div> 
 <script> 
 var div = document.querySelector('div'); 
 var bl = window.location.hash.slice(1).split('?'); 
 if(bl.length >= 1){ 
 for(var i = 0; i < bl.length; i += 1){ 
 switch (bl[i].split('=')[0]) { 
 case 'bgc': 
 document.body.style.background = bl[i].split('=')[1]; 
 break; 
 case 'wd': 
 div.style.width = bl[i].split('=')[1] + 'px'; 
 break; 
 default: 
 null; 
 break; 
 } 
 } 
 } 
 </script>

通過截取字符串取得url傳遞過來(lái)的變量應(yīng)用。成功！

第二個(gè)問題，我想的是通過iframe來(lái)達(dá)到目的，這只是一個(gè)障眼法。

在a頁(yè)面動(dòng)態(tài)創(chuàng)建一個(gè)iframe，并設(shè)置src值為b頁(yè)面，display為none。再通過iframe的contentDocument屬性獲取返回的iframe的文檔。

在文檔內(nèi)獲取到所需要的元素并應(yīng)用。

源碼：

<span>11111111111</span> 
 <script> 
 var fram = document.createElement('iframe'); 
 fram.src = 'http://www.vip.com/kongzhi/fram2.html'; 
 fram.style.display = 'none'; 
 document.body.appendChild(fram); 
 fram.onload = function(){ 
 var doc = fram.contentDocument || fram.contentWindow.document; 
 var p = doc.querySelector('p'); 
 document.body.appendChild(p); 
 } 
 </script>

以上這篇JS控制靜態(tài)頁(yè)面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: