JS控制靜態(tài)頁面?zhèn)鬟f參數(shù)并獲取參數(shù)應(yīng)用

更新時間：2016年08月10日 10:31:44 作者：黑白紅塵

這篇文章主要介紹了JS控制靜態(tài)頁面?zhèn)鬟f參數(shù)并獲取參數(shù)應(yīng)用的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

在項目中遇到這也一個問題：

有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頁面。

注意：不涉及跨域問題。

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

第一個問題，我們可以利用html頁面錨點的特性，將參數(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>

由代碼可以知道，點擊按鈕跳轉(zhuǎn)頁面，跳轉(zhuǎn)的url后面多了一系列參數(shù)，這個并不會影響跳轉(zhuǎn)的地址，當(dāng)b頁面打開后，可以獲取location截取字符串獲得變量及變量值，再進行應(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)用。成功！

第二個問題，我想的是通過iframe來達到目的，這只是一個障眼法。

在a頁面動態(tài)創(chuàng)建一個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)頁面?zhèn)鬟f參數(shù)并獲取參數(shù)應(yīng)用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: