嵌入SCRIPT標記的作用

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

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

新聞標題：嵌入SCRIPT標記的作用
網頁URL：http://m.kartarina.com/news21/321771.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、外貿網站建設、App設計、服務器托管、標簽優化、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯