Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

嵌入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不支持currentScriptpreviousElementSibling也有解决办法。
<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。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^