JS控制靜態(tài)頁面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡(jiǎn)單實(shí)例
在項(xiàng)目中遇到這也一個(gè)問題:
有a.html和b.html。
1.a頁面已經(jīng)打開,b頁面尚未打開,我希望在a頁面設(shè)置好一些列參數(shù),比如背景色,寬度等參數(shù),傳遞給b頁面,好讓b頁面在打開就能應(yīng)用。
2.a頁面已經(jīng)打開,b頁面無論是否打開。在a頁面需要獲取到b頁面的一些元素甚至變量,以便于應(yīng)用到a頁面。
注意:不涉及跨域問題。
想了很久,終于想到了解決方案。
第一個(gè)問題,我們可以利用html頁面錨點(diǎn)的特性,將參數(shù)通過url傳遞給b頁面
這是a頁面代碼:
<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)頁面,跳轉(zhuǎn)的url后面多了一系列參數(shù),這個(gè)并不會(huì)影響跳轉(zhuǎn)的地址,當(dāng)b頁面打開后,可以獲取location截取字符串獲得變量及變量值,再進(jìn)行應(yīng)用。
這是b頁面代碼:
<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傳遞過來的變量應(yīng)用。成功!
第二個(gè)問題,我想的是通過iframe來達(dá)到目的,這只是一個(gè)障眼法。
在a頁面動(dòng)態(tài)創(chuàng)建一個(gè)iframe,并設(shè)置src值為b頁面,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)頁面之間傳遞參數(shù)獲取參數(shù)并應(yīng)用的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 判斷數(shù)據(jù)類型的4種方法
這篇文章主要介紹了JavaScript 判斷數(shù)據(jù)類型的4種方法,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09javascript 將共享屬性遷移到原型中去的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript 將共享屬性遷移到原型中去的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器
這篇文章主要介紹了JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器的方法,幫助大家更好的理解和學(xué)習(xí)使用js,感興趣的朋友可以了解下2021-03-03javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下,感興趣的朋友可以參考下,希望對(duì)你對(duì)你學(xué)習(xí)function的定義有所幫助2013-05-05