天天看點

JS實作靜态頁面之間的參數傳遞

首先說一下所謂靜态頁面參數傳遞的意思。

有a.html和b.html兩個頁面,不通過伺服器,隻用JS實作,把a頁面裡面參數傳到b頁面中去。

正常情況下,隻有通過後端伺服器才能動态控制模闆頁面的參數,但是有時候我們需要類似于後端一樣的動态操作,又隻能前端操作的時候,就需要到了這種傳遞簡單參數的方法。

1.傳遞參數的頁面:send.html

<button type="button" onclick="sendurls(urls,titles,imgurls)"></button>

<script>

function sendurls(urls,titles,imgurls){

window.open(encodeURI(urls+ "?imgurls="+imgurls +"?artileTitle="+titles),"_self"); 

</script>

說明:在 a頁面建立一個發送參數的函數sendurls(),urls參數是一個位址(這個位址參數在b頁面接收後,可作為想連結到的頁 面的href連結位址);imgurls參數是一個圖檔位址參數,artileTitle參數為一段文本(在這裡我用為b頁面的标題);_self為 在目前頁面打開(window.open()預設問為在新視窗打開)。

2.接收參數的頁面:gets.html  

  1. <div class="content">  
  2.         <h3 id="lcTitle"><!-- 标題 --></h3>  
  3.         <img src="" class="pageImg" id="pageImg" alt="">
  4.  </div> 
  1. <script>  

function geturls(){   //擷取目前的位址(位址裡含有從a頁面傳遞過來的三個參數)   var  urlsinfo  =  window .location.href;    //正則比對擷取的位址,擷取圖檔位址參數。 var  imgurls  =  urlsinfo .split("?")[1].split("=")[1];   //正則比對擷取的位址,擷取文本參數。   var  articletitle  =  urlsinfo .split(" artileTitle =")[1];   //将接受頁面的标題修改為接收到的文本标題參數  decodeURI </ span > 為位址解碼   document.title  =  decodeURI (articletitle);   /同上-》将文章标題修改為擷取的标題文本    document.getElementById('lcTitle') .innerHTML  =  decodeURI (articletitle);   //将圖檔位址改為擷取的圖檔位址參數 document.getElementById('pageImg').setAttribute("src",imgurls);   </ script >   **在b頁面的body内添加onload事件,加載這個函數就完成了在a頁面點選不同的按鈕,動态修改b頁面的網頁标題,文章标題和圖檔的功能。  

如:<body onload="geturls()"> 

轉載請附加文本位址說明:http://blog.csdn.net/wdzmds 

繼續閱讀