关于动态修改script标签的src的值引发的一些思考-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_2245/article/details/82329482

本文探讨了HTML4标准中关于script标签src属性的规定，以及不同浏览器对于动态修改src、type、charset等属性的行为差异。实验结果显示，Chrome和Firefox在修改src后不会请求新URL，而IE9及以下版本会有不同的请求和执行行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

最近在逛各家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>

浏览器反应：