关于动态批改script标签的src的值引发的一些思考 _Web前端

关于动态修改script标签的src的值引发的一些思考

前言：

最近在逛各家UED博客的时候，在w3ctech上看到的这个Topic的文章，个人感觉还是不错的，决定转换为自己的实践知识。

正文：

首先我这边先抛出几个结论性的东东：

?? ?来自w3c的HTML4标准

如果src属性没有被设置，就执行script标签内的脚本内容；如果src有一个URL的值，则忽略script标签的脚本内容，而是去请求指定的URL的内容

?? ?来自w3c的HTML5标准

动态地修改src、type、charset、async和defer属性没有直接的效果，这些属性在特定的时候使用

下面我们从几种常见出发结合上面的结论：

1、script标签没有指定src的值

<script id="test" type="text/javascript">
</script>
<script type="text/javasript">
    document.getElementById("test").src = "*****";
</script>

浏览器反应：

Chrome | ?FF ?没有请求新的URL
IE9 请求新的URL 但是没有执行对应URL的脚本
IE6-8 请求并执行对应URL的脚本

??注意一下第一个script标签内部其实是有内容的，有一个回车的符号 ?

??所以测试改为下面这样：

<script id="test" type="text/javascript">
  alert("内部脚本");
</script>
<script type="text/javasript">
    document.getElementById("test").src = "*****";
</script>

浏览器反应：

Chrome | ?FF 会执行内部的那个alert脚本，但是没有请求新的URL
IE9?会执行内部的那个alert脚本，并请求新的URL，但不执行里面的脚本
IE6-8 会执行内部的那个alert脚本，并请求新的URL和执行里面的脚本

?? 所以这个是符合第一个HTML4的那个结论的前半部分

??再改一下：

?? Tip：一般很少人会同时指定src又在script标签内部写脚本，这边只是测试用

<script id="test" type="text/javascript" src="*****">
  alert("内部脚本");
</script>
<script type="text/javasript">
    document.getElementById("test").src = "*****";
</script>

浏览器反应：

Chrome | ?FF 不会执行内部的那个alert脚本，而是执行对应开始设置的URL的脚本，但是没有请求新的URL
IE9 ?不会执行内部的那个alert脚本，而是执行对应开始设置的URL的脚本，并请求新的URL，但不执行里面的脚本
IE6-8 ?不会执行内部的那个alert脚本，而是执行对应开始设置的URL的脚本，并请求新的URL和执行里面的脚本

??所以这个是符合第一个HTML4的那个结论的后半部分

部分内容来源于：

?http://w3ctech.com/p/1141