10bet为什么使用 document.write 需要将</script>拆

来源:http://www.chinese-glasses.com 作者:Web前端 人气:79 发布时间:2020-03-24
摘要:htmlbodyscript type="text/javascript" document.write('script type="text/javascript"alert(1024);/script'); alert(2048)/script/body/html 浏览器解析 JavaScript 、CSS 、DOM时,一般都是单线程解析,所以,引用外部文件时的
htmlbodyscript type="text/javascript" document.write('script type="text/javascript"alert(1024);/script'); alert(2048)/script/body/html

浏览器解析 JavaScript 、CSS 、DOM 时,一般都是单线程解析,所以,引用外部文件时的位置不同,UE体验也不同。

扩展一下,提供另外一种方法在纯JS中动态加载脚本:

4、使用 LAB.js 开源库以非阻塞方式加载外部 JS 文件,从  lab.js  下载,  

if (typeof(jQuery) == 'undefined') { (function() { var sct = document.createElement('script'); sct.src = ('' == document.location.protocol ? '' : 'http') + '://cdn.bootcss.com/jquery/3.4.1/jquery.js'; sct.type = 'text/javascript'; var myjs = document.getElementsByTagName('script')[0]; myjs.parentNode.insertBefore(sct, myjs); })();}

  一般可在<head></head>标签中动态生成<script>标签,如下,

细心点的朋友可能会注意到,有些网站使用document.write动态加载JS的时候需要把/script拆分开来写?如下面的例子所示:

  </head>

时间: 2019-11-11阅读: 60标签: script

  一般情况下,LAB 会按照顺序执行多个JS 文件,但并不保证,所以,如果你要保证运行的前后顺序,

script type='text/javascript' if (typeof window['jQuery'] == 'undefined') document.write('scr'+'ipt type="text/javascript" src=""/sc'+'ript');/script

  $LAB 的方法都返回一个 $LAB 对象,所以可以进行链式调用。

'); alert(2048)

    <script src="js/LAB.min.js"></script>
    <script>
      $LAB.script("the-rest.js").wait(function() {
        // 加载完之后,做一些逻辑操作
        ......
      });
    </script>

最后你会发现结果是这样的:

  也可以同时加载多个 JS 文件,写成数组的形式,

因此,我们可以猜出原因可能是,/script 如果不拆开,会导致过早结束script块,导致后面的JS都被解析成了普通的文本。

10bet,  注意,LazyLoad 会保证在所有的浏览器中按照顺序加载所有 JS 文件,每一个 JS 文件都是一个单独的 HTTP 请求,

为此,我们可以做一个实验,打开记事本填入下面的内容,另存为html格式,使用浏览器打开看看:

    $LAB.script("first.js").wait().script("the-rest.js").wait(function() {
      // 加载完之后,做一些逻辑操作
      ......
    });

  那么请使用 wait() 方法,如下,

    LazyLoad.js(["the-rest.js", "file2.js", "file3.js"], function() {
      // 加载完之后,做一些逻辑操作
      ......
    });

  <html>

    <script src="js/lazyload-min.js"></script>
    <script>
      LazyLoad.js("the-rest.js", function() {
        // 加载完之后,做一些逻辑操作
        ......
      });
    </script>

  </body>

    ...

    <script src="jquery.js"></script>

3、使用 LazyLoad.js 开源库以非阻塞方式加载外部 JS 文件,从  github : LazyLoad.js  下载,   

本文由10bet发布于Web前端,转载请注明出处:10bet为什么使用 document.write 需要将&lt;/script&gt;拆

关键词:

最火资讯