为什么在使用document.write()编写<script>标记时将其拆分？

Question

为什么有些网站(或提供客户端javascript代码的广告客户)采用了在通话中拆分<script>和/或</script>标记的技术document.write()？

我注意到亚马逊也这样做了,例如:

<script type='text/javascript'>
  if (typeof window['jQuery'] == 'undefined') document.write('<scr'+'ipt type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></sc'+'ript>');
</script>

Answer 1

</script>必须被打破,否则它会<script></script>过早地结束封闭区块.实际上它应该在<和之间分开/,因为假设一个脚本块(根据SGML)被任何结束标记打开(ETAGO)序列(即</)终止:

尽管STYLE和SCRIPT元素使用CDATA作为其数据模型,但对于这些元素,CDATA必须由用户代理以不同方式处理.必须将标记和实体视为原始文本并按原样传递给应用程序.第一次出现的字符序列" </"(结束标记打开定界符)被视为终止元素内容的结尾.在有效文档中,这将是元素的结束标记.

但实际上,浏览器只会在实际的</script>close-tag 上解析CDATA脚本块.

在XHTML中,脚本块没有这种特殊处理,因此它们中的任何<(或&)字符必须&escaped;与任何其他元素一样.然而,将XHTML解析为旧式HTML的浏览器会变得混乱.有一些涉及CDATA块的解决方法,但最简单的方法是避免使用未转义的这些字符.从适用于任何类型的解析器的脚本编写脚本元素的更好方法是:

<script type="text/javascript">
    document.write('\x3Cscript type="text/javascript" src="foo.js">\x3C/script>');
</script>

Answer 2

这是我想要生成内联脚本标记时使用的另一种变体(因此它立即执行),而不需要任何形式的转义:

<script>
    var script = document.createElement('script');
    script.src = '/path/to/script.js';
    document.write(script.outerHTML);
</script>

(注意:与网络上的大多数示例相反,我type="text/javascript"既没有设置封闭标签,也没有设置生成的标签:没有浏览器没有将其作为默认值,因此它是多余的,但也不会伤害,如果你不同意).

Answer 3

我认为是为了防止浏览器的HTML解析器解释<script>,主要是</ script>作为实际脚本的结束标记,但我不认为使用document.write是评估脚本的绝佳主意块,为什么不使用DOM ...

var newScript = document.createElement("script");
...

Answer 4

将</script>在JavaScript字符串litteral内部由HTML解析器关闭标签的解释,从而导致意外的行为(见例如上的jsfiddle).

为了避免这种情况,你可以将你的javascript放在注释之间(这种编码风格是常见的做法,当Javascript在浏览器中得不到支持时).这可行(参见JSFiddle中的示例):

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        document.write('<script type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></script>');
    }
    // -->
</script>

...但说实话,使用document.write不是我认为最佳实践的东西.为什么不直接操纵DOM？

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', 'http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js');
        document.body.appendChild(script);
    }
    // -->
</script>

Answer 5

Bobince发布的解决方案非常适合我.我想为未来的访问者提供另一种方法:

if (typeof(jQuery) == 'undefined') {
    (function() {
        var sct = document.createElement('script');
        sct.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js';
        sct.type = 'text/javascript';
        sct.async = 'true';
        var domel = document.getElementsByTagName('script')[0];
        domel.parentNode.insertBefore(sct, domel);
    })();
}

在这个例子中,我为jQuery包含了一个条件加载来演示用例.希望对某人有用!