关于动态修改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