嵌入SCRIPT標(biāo)記的作用

2024-03-25    分類: 網(wǎng)站建設(shè)

為了保持前端的程序與骨架的分離,我經(jīng)常會(huì)把程序做成單獨(dú)的部分放到頁(yè)面HTML外,并在HEAD中引入外部程序。需要操作文檔的程序會(huì)讓其在DOMReady之后工作。但是DOMReady終究還是太慢了,有時(shí)候我們須有某個(gè)元素加載完成后立即執(zhí)行某個(gè)代碼。 比如下面的代碼,就是直接在DOMContentLoaded之后修改元素的內(nèi)容 <script> document.addEventListener("DOMContentLoaded",function(e){ document.querySelector("div").innerHTML="我是內(nèi)容"; }); </script> <div>{title}</div> <? ob_flush(); flush(); sleep(1); //假如網(wǎng)絡(luò)延遲使得這個(gè)連接遲了一秒 ?> 如果文檔瞬間加載完成,我們幾乎看不到“{title}”,但是文檔的加載可能有延遲,這就可能讓用戶看到一些不該看到的。對(duì)于上面的情況,我們應(yīng)該在DIV這個(gè)標(biāo)記加載完成后直接直接相應(yīng)的程序,所以應(yīng)該這么寫 運(yùn)行<div>加載中···</div> <script> document.querySelector("div").innerHTML="我是內(nèi)容"; </script> 這樣用戶就不會(huì)輕易看到“{title}”了,但也不是不能保證絕對(duì)看不到,比如網(wǎng)絡(luò)正好在“</div>”的地方卡住。所以我一直很反感將HTML作為模板的做法,模板就該是個(gè)字符串,可以用SCRIPT標(biāo)記來(lái)引入,不該直接作為可以被正常解析的HTML寫到文檔中。 如果覺(jué)得上面這個(gè)代碼對(duì)元素的選擇有困難,而且有多余的SCRIPT標(biāo)記會(huì)影響HTML結(jié)構(gòu),我們可以這么寫 運(yùn)行<div>{title}</div> <script> var script=document.currentScript; script.previousElementSibling.innerHTML="我是內(nèi)容"; script.parentNode.removeChild(script); </script>

裝作這個(gè)DIV的內(nèi)容是由服務(wù)器直接生成似得,不留下任何蛛絲馬跡。對(duì)于低版本IE不支持currentScript和previousElementSibling也有解決辦法。 運(yùn)行<div>{title}</div> <script> var prev,script=prev=document.scripts[document.scripts.length-1]; while((prev=prev.previousSibling)&&prev.nodeType!=1); prev.innerHTML="我是內(nèi)容"; script.parentNode.removeChild(script); </script> 由于SCRIPT是HTML在解析過(guò)程中執(zhí)行的,SCRIPT中的初始執(zhí)行消息中獲取文檔的最后一個(gè)SCRIPT就是當(dāng)前SCRIPT。 本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

新聞標(biāo)題:嵌入SCRIPT標(biāo)記的作用
網(wǎng)頁(yè)URL:http://muchs.cn/news21/321771.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷推廣、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)、服務(wù)器托管、標(biāo)簽優(yōu)化、虛擬主機(jī)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)