JS控制靜態(tài)頁(yè)面?zhèn)鬟f參數(shù)并獲取參數(shù)應(yīng)用
在項(xiàng)目中遇到這也一個(gè)問(wèn)題:
有a.html和b.html。
1.a頁(yè)面已經(jīng)打開(kāi),b頁(yè)面尚未打開(kāi),我希望在a頁(yè)面設(shè)置好一些列參數(shù),比如背景色,寬度等參數(shù),傳遞給b頁(yè)面,好讓b頁(yè)面在打開(kāi)就能應(yīng)用。
2.a頁(yè)面已經(jīng)打開(kāi),b頁(yè)面無(wú)論是否打開(kāi)。在a頁(yè)面需要獲取到b頁(yè)面的一些元素甚至變量,以便于應(yīng)用到a頁(yè)面。
注意:不涉及跨域問(wèn)題。
想了很久,終于想到了解決方案。
第一個(gè)問(wèn)題,我們可以利用html頁(yè)面錨點(diǎn)的特性,將參數(shù)通過(guò)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è)面打開(kāi)后,可以獲取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>
通過(guò)截取字符串取得url傳遞過(guò)來(lái)的變量應(yīng)用。成功!
第二個(gè)問(wèn)題,我想的是通過(guò)iframe來(lái)達(dá)到目的,這只是一個(gè)障眼法。
在a頁(yè)面動(dòng)態(tài)創(chuàng)建一個(gè)iframe,并設(shè)置src值為b頁(yè)面,display為none。再通過(guò)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è)面?zhèn)鬟f參數(shù)并獲取參數(shù)應(yīng)用,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
input獲取焦點(diǎn)時(shí)底部菜單被頂上來(lái)問(wèn)題的解決辦法
這篇文章主要介紹了解決input獲取焦點(diǎn)時(shí)底部菜單被頂上來(lái)問(wèn)題的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下2017-01-01js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05認(rèn)識(shí)延遲時(shí)間為0的setTimeout
由 John Resig 的 How JavaScript Timers Work 可以知道,現(xiàn)有的 JavaScript 引擎是單線程處理任務(wù)的。它把任務(wù)放到隊(duì)列中,不會(huì)同步去執(zhí)行,必須在完成一個(gè)任務(wù)后才開(kāi)始另外一個(gè)任務(wù)。2008-05-05javascript 常見(jiàn)的閉包問(wèn)題的解決辦法
javascript 常見(jiàn)的閉包問(wèn)題的解決辦法,需要的朋友可以參考下。2009-11-11javascript 流暢動(dòng)畫(huà)實(shí)現(xiàn)原理
瀏覽器目前來(lái)說(shuō)是沒(méi)有抗鋸齒效果的(將來(lái)不一定哦),這樣dom元素外觀的改變就被限制在1個(gè)像素為最佳效果。2009-09-09js實(shí)現(xiàn)右下角可關(guān)閉最小化div(可用于展示推薦內(nèi)容)
使用Javascript實(shí)現(xiàn)右下角可關(guān)閉最小化div,可以用于展示推薦內(nèi)容,完整源代碼如下,感興趣的各位可以參下哈,希望對(duì)大家有所幫助2013-06-06