嵌入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：https://www.cdcxhl.com/news21/321771.html

成都网站建设公司_创新互联，为您提供全网营销推广、外贸网站建设、App设计、服务器托管、标签优化、虚拟主机

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联