`
zhangyaochun
  • 浏览: 2611452 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

关于动态修改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的那个结论的后半部分



部分内容来源于:

 

分享到:
评论

相关推荐

    动态给head添加script

    在网页开发中,有时我们需要在页面加载过程中动态地向`&lt;head&gt;`标签内添加`&lt;script&gt;`元素,以便实现异步加载脚本、延迟加载或按需加载等功能。这种技术对于优化网页性能、减少首屏加载时间以及提高用户体验至关重要。...

    动态script标签技术结合JSON数据交换格式解决Ajax的跨域问题

    ### 动态script标签技术结合JSON数据交换格式解决Ajax的跨域问题 #### 摘要 本文探讨了如何利用动态script标签技术和JSON数据交换格式来解决Ajax应用程序中跨域访问第三方Web服务的问题。跨域访问是Web开发中常见...

    IE8中动态创建script标签onload无效的解决方法

    本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。 代码如下: 代码如下:var...

    jQuery修改标签内容实例

    &lt;script src="jquery-1.8.3.min.js"&gt;&lt;/script&gt; ``` 一旦引入了jQuery,我们就可以使用其丰富的API来操作DOM。下面我们将逐一讲解如何修改四种标签的内容: 1. **修改超链接`&lt;a&gt;`标签内容**: 要修改超链接的文本...

    FiddlerScript修改指定参数的返回值

    利用FiddlerScript获取请求参数,请求中有指定参数时修改返回值。

    动态加载script文件的两种方法

    动态加载JavaScript文件是Web开发中常见的一种技术,它允许网页在...通过Ajax和动态创建`&lt;script&gt;`标签,开发者可以根据项目需求选择合适的方法。同时,注意安全性和兼容性问题,以及处理脚本加载完成后的回调逻辑。

    【第七章】JavaScript【Script标签与访问HTML页面(1)】

    【第七章】JavaScript【Script标签与访问HTML页面(1)】是关于JavaScript编程的一个章节,主要探讨了如何在HTML文档中使用Script标签以及JavaScript如何与HTML页面进行交互。这一主题对于理解和开发动态网页至关重要...

    JavaScript动态添加css样式和script标签

    JavaScript动态添加CSS样式和script标签的知识点涵盖了Web开发中的客户端脚本编程技术,允许开发者在运行时动态地操作和修改网页的样式和行为。以下是对给定文件中所提到知识点的详细解释: 1. 动态添加CSS样式 - ...

    vue动态加载外部依赖js代码实现

    - **load方法**: 此方法接受一个参数`src`,根据该参数动态创建并插入`&lt;script&gt;`标签到DOM中。同时,它还监听`onload`事件,以便在JS文件加载完成后触发相应的回调函数。 5. **使用示例** - **导入组件**: 首先,...

    Quartz动态修改时间,java实现修改CronExpression方法

    本项目主要探讨如何在运行时动态修改Quartz定时任务的CronExpression,即cron表达式,来改变任务的执行时间。 首先,CronExpression是Quartz中用于定义时间触发规则的关键组件,它基于Unix的crontab语法,可以精确...

    关于vue v-for循环解决img标签的src动态绑定问题

    在动态绑定标签的src属性时,通常会遇到路径和上下文环境的问题。这主要是因为浏览器在加载图片时,需要根据当前页面的相对路径或者绝对路径来寻找资源。如果路径设置错误,浏览器无法找到资源,就会导致图片无法...

    Spring @Scheduled定时任务动态修改cron参数

    当然,这种方法需要处理一些边界情况,比如并发修改和错误处理。在实际应用中,可能还需要使用线程安全的方式来存储和更新cron表达式,以及确保任务的幂等性,以防止同一任务被多次执行。 总的来说,Spring的`@...

    Jquery修改image的src属性,图片不加载问题的解决方法

    标签“Jquery image src”指的是使用Jquery操作image元素的src属性,这是Jquery中经常使用的操作之一,用于动态地更改网页上的图片内容。 从给出的内容部分来看,文章首先提出了一个具体的问题场景:当点击按钮时,...

    js改变embed标签src值的方法

    本文标题“js改变embed标签src值的方法”所介绍的是使用JavaScript来动态改变嵌入网页中的多媒体元素的源地址(src属性),具体是针对`&lt;embed&gt;`标签。 `&lt;embed&gt;`标签是HTML中的一个容器,可以用于嵌入各种外部应用...

    javascript修改IMG标签的src问题

    关于JavaScript修改img标签的src属性的问题,涉及到浏览器缓存机制和动态更新图片源的需求。在IE6浏览器中图片可以正常刷新,但在IE7和Firefox浏览器中遇到刷新不出现的情况,主要的原因可能和浏览器对静态资源的...

    HTML5 对各个标签的定义与规定:script

    - 当`src`属性存在时,`&lt;script&gt;`标签必须为空,即不能包含内联脚本。 - 在使用`async`或`defer`属性时,需要注意它们之间以及与脚本依赖关系之间的相互影响。 ### 总结 `&lt;script&gt;`标签是HTML5中非常重要的元素之一...

    js原生跨域_用script标签的简单实现.docx

    因此,可以通过创建动态的`&lt;script&gt;`标签并设置其`src`属性为跨域请求的URL,从而绕过浏览器的同源策略限制。 #### 实现步骤 1. **创建动态`&lt;script&gt;`标签**: ```javascript var script = document....

    how-to-load-dynamic-script, 加载动态脚本的正确方法.zip

    &lt;script src="path/to/script.js"&gt;&lt;/script&gt; ``` 然而,这种方式是静态加载,所有脚本会在页面解析时立即加载。 3. 动态创建`&lt;script&gt;`元素: 要实现动态加载,可以使用JavaScript动态创建`&lt;script&gt;`元素并将其...

    vue动态设置img的src路径实例

    本文将通过一个具体的实例来演示如何在Vue中动态设置img标签的src属性。 首先,我们需要了解在Vue中为什么需要动态设置src属性。假设我们有一个用户头像的显示功能,用户的头像地址可能会随时更改,这时我们不能在...

Global site tag (gtag.js) - Google Analytics