html script src属性,动态修改script标签中的src属性存在的问题
今天某个同事遇到一个诡异的问题,问题描述如下:
需求:通过脚本动态修改script标签的src来载入一段外部脚本并执行
实现方式(#1):
document.getElementById('external-script').src='url2';
url2的内容如下:
alert('I am dynamic');
结果:
Chrome: 什么事都没发生(没有请求url2)
Firefox: 什么事都没发生(没有请求url2)
IE9:什么事都没发生(请求url2但不执行url2的脚本)
IE(6,7,8): I am dynamic(请求并执行了url2的脚本)
注意实现方式中,第一段的script标签中间是有内容的(空格、换行符以及回车符)。
如何来解释这个问题呢?要解释这个问题,我们来看两个变种的例子,第一个例子(明确内联内容),如下所示(#2):
alert('I am inline');
document.getElementById('external-script').src='url2';
结果如下:
Chrome: I am inline(没有请求url2)
Firefox: I am inline(没有请求url2)
IE9:I am inline(请求url2但不执行url2的脚本)
IE(6,7,8): I am inline I am dynamic(请求并执行了url2的脚本)
再来看看第二个变种的例子(#3):
alert('I am inline script');
document.getElementById('external-script').src='url2';
其中url1的内容如下:
alert('I am url1');
结果如下:
Chrome: I am url1(没有请求url2)
Firefox: I am url1(没有请求url2)
IE9:I am url1(请求url2但不执行url2的脚本)
IE(6,7,8): I am url1 I am dynamic(请求并执行了url2的脚本)
首先这里肯定的是src属性是修改成功的,可以通过看dom的变化看到src已经设置进去了。这个时候我们比对这三个例子,思考几十秒。分析下这三个例子,其实#2和#1是一样的,这里用#2是为了说明#1中的空格、换行符以及回车符会被浏览器认为是内联的脚本。通过比对#2和#3,是不是会让你想到什么?没错,我们第一个会想到的就是:当script标签既有src属性又有内联脚本的时候浏览器该如何处理? , 先来解释这个问题。
一谈到浏览器应该怎样处理,就不得不翻出各种宝典,这次不再是葵花宝典了,而是九阴真经(W3C的HTML4标准),标准中关于script标签的src部分有如下一段话:
If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI
上面这段话的意思就是说:如果src没有设置,那么就执行内联脚本,如果src设置了浏览器就必须忽略内敛脚本而要去请求src指定的url的内容
这解释了为什么#3中标准浏览器(甚至IE6,7,8)都没有执行内联脚本(因为src设置了url1)。
搞清楚了这个基础问题之后,接下来问题就定位到了动态修改script的src属性的时候浏览器如何处理? ,从结果来看,标准的浏览器都没有去请求url2(更改src无效),这回IE6,7,8终于犯傻了。当然了,咱们也不能随随便便说人家犯傻,要拿出证据,这个时候继续拿出九阴真经W3C的HTML5标准,其中有这样一句话:
Changing the src, type, charset, async, and defer attributes dynamically has no direct effect; these attribute are only used at specific times described below.
意思就是说:修改src是没用的,对src的处理只会在特定的时候进行(个人猜测就是第一次看到这个属性的时候浏览器会去做相应处理,之后就无视它了)。
好了,这下真相大白了:这解释了为啥#3和#1中除了IE6,7,8之外其他浏览器都没有去请求url2(IE9请求了,但没执行),而且实验发现IE6,7,8对动态修改src都会做请求执行处理。
最后,这个故事至少告诉我们:写script标签的时候千万别手贱打回车。
参考文档:
html script src属性,动态修改script标签中的src属性存在的问题相关推荐
- script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
- [暑假]<script>标签中的type属性详解
type属性是必须写的属性吗? 不写的情况: <script>标签中的type属性不是必须写的属性, 因为按照惯例,这个值始终都是"text/javascript", ...
- vue 项目中,动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标 需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标 实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
- CSS 修改Img标签中的图片(src)
在开发的过程中遇到了一个比较特别的问题,需要使用 CSS修改Img中的图片. content 那最先通过搜索找到的解决方案是使用 Content 样式 /*图片替换*/ img {content: u ...
- js修改div标签中的内容
<div id='divId'>初始文字</div><script>$(document).ready(function(e){$('#divId').html(' ...
- [html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢?
[html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢? 当默认图也失效,就会陷入死循环,需加变量计数,如果是 vue 的话用 @error.once 更妙.在 onerror 给元 ...
- [html] html标签中的lang属性有什么作用?
[html] html标签中的lang属性有什么作用? 根据lang属性来设定不同语言的css样式,或者字体告诉搜索引擎做精确的识别让语法检查程序做语言识别帮助翻译工具做识别帮助网页阅读程序做识别等等 ...
- html标签中的lang属性
写在html标签中的lang属性作用:声明当前页面的语言类型. 如: <html lang='en'></html> //英文 <html lang='zh'>&l ...
- c:out标签中的escapeXML属性
<c:out>标签中的escapeXML属性 在<c:out>中,escapeXML属性默认为true. 当设置escapeXML的属性为true时,将value中的值以字符串 ...
最新文章
- 刷了一个月算法,终于拿到了double的offer
- 安卓用户又少了一项自由,Android 11不再支持更改默认相机程序
- 智能合约不够安全?微软建专项小组从编程语言入手根治
- LA4851餐厅(求好的坐标的个数)
- java工资高还是php_java和php哪个工资高
- Go语言GO111MODULE设置
- mybatis plus 插入生成id_早点下班陪女朋友系列之Mybatis-plus代码生成器
- 解决添加打印机print spooler打印服务自动关闭故障
- Java开发基础(四)——dbutils的使用
- 从零实现深度学习框架——前馈网络语言模型
- “盲人”马云:骑着盲虎贩卖梦想
- 假设一张纸的厚度是1mm,那么这张纸折叠多少次可以到达珠穆朗玛峰的高度(8848m)?
- matlab中stract用法_matlab初学之strcat、num2str
- 计算机系的同学应该有更高的雄心壮志
- 海思SDK学习(11)海思媒体处理软件平台MMP(10)VGS视频图形子系统
- tensorflow+python flask进行手写识别_python+flask搭建CNN在线识别手写中文网站!简直太屌了!...
- java网课|final权限修饰符
- Kubernetes调度器源码学习(三):Preempt抢占机制、调度失败与重试处理
- 微信小程序对接腾讯对象存储
- dump在计算机中的意义