通常大家最为熟悉的是一下两种方法：

  1. 在页面中直接写入<script type="text/javascript">js代码</script>。
  2. 在页面中引入外部文件<script src="xx.js"></script>。

下面再介绍几种页面引入js的代码：

  1. 在js中引入外部js，通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。此时：<script></script>被拆解为"<scr"+"ipt .....</scr"+"ipt">，如果不这样拆解，浏览器可能会把父级js片段关闭掉，从而导致出错。
  2. 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>");
  3. 通过DOM添加：var scr=document.createElement("script"); scr.src="xxx.js";

下面测试下，不同的方式引入js，加载的时间顺序：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <script src="2.js" type="text/javascript"></script>

         <script type="text/javascript">

              document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入

              document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入

              alert(1);

              document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");

              alert(5);

         </script>

     </head>

     <body>

     </body>

 </html>

执行顺序：2-4-1-5-3-3

第三种和第四种交换顺序后：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <script src="2.js" type="text/javascript"></script>

         <script type="text/javascript">

              document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入

              document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入

              alert(1);

              document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");

              alert(5);

         </script>

     </head>

     <body>

     </body>

 </html>

执行顺序：2-1-5-3-4-3

可以看出第三种方式：document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">引入js的代码，执行会迟与直接写入的js文本。

同时，第四种方式引入js的执行和直接写入的文本是按顺序执行。

总结下，常用的一下几种方式引入js代码：

  1. 在页面中直接写入<script type="text/javascript">js代码</script>。
  2. 在页面中引入外部文件<script src="xx.js"></script>。
  3. 在js中引入外部js，通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。
  4. 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>")。
  5. 通过DOM添加：var scr=document.createElement("script"); scr.src="xxx.js";

页面中引入js的几种方法的更多相关文章

  1. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  2. a 标签中调用js的几种方法 文章摘自他人

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  3. a 标签中调用js的几种方法

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

  4. a 中调用js的几种方法

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  5. a标签中调用js的几种方法

    1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议 ...

  6. 在页面中嵌入svg的几种方法

    //在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...

  7. 页面自动执行js的3种方法

    1.最简单的调用方式,直接写到html的body标签里面:   <html> <body onload="load();"> </body> & ...

  8. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  9. 同一页面中引入多个JS库产生的冲突解决方案(转)

    发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号.因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...

随机推荐

  1. angularJS socket

    工程Controller加载文件Service层socket.js.controller所在页面时连接socket(也可一进入项目就连接,看需求).细节还需继续优化,写下来以防忘了~ Service层 ...

  2. MEF初体验之三：Exports声明

    组合部件通过[ExportAttribute]声明exports.在MEF中,有这么几种成员可声明exports的方式:组合部件(类).字段.属性和方法.我们来看下ExportAttribute类的声 ...

  3. Linux 介绍了相关的文件夹

    学习Linux,先了解Linux标准的文件夹结构是非常重要的,学习的一个很好的铺垫之后的行动.去罗列大而全的所有文件夹. 本文主要说明.笔者本人接触,须要了解的一些文件文件夹,当然本文也会不断的更新或 ...

  4. 理解Android虚拟机体系结构(转)

    1 什么是Dalvik虚拟机 Dalvik是Google公司自己设计用于Android平台的Java虚拟机,它是Android平台的重要组成部分,支持dex格式(Dalvik Executable)的 ...

  5. hdu 4965 Fast Matrix Calculation(矩阵高速幂)

    题目链接.hdu 4965 Fast Matrix Calculation 题目大意:给定两个矩阵A,B,分别为N*K和K*N. 矩阵C = A*B 矩阵M=CN∗N 将矩阵M中的全部元素取模6,得到 ...

  6. jsoup分解HTML DOM

    采用jsoup 分解HTML .使用和JS操作DOM分类似. 示例代码: import java.io.IOException; import org.jsoup.Jsoup; import org. ...

  7. FZU 2082 过路费(树链剖分）

    FZU 2082 过路费 题目链接 树链抛分改动边的模板题 代码: #include <cstdio> #include <cstring> #include <vect ...

  8. NSOJ 飞船汇合(经典)

    一支分散的飞船舰队,需要汇合到主舰,但是这种飞船在太空中飞行的耗油与质量没有关系,只与发动机打开的时间有关系,为了节省油量,指挥官通知,汇合途中,多台飞船可以串成串飞行,这样只需启动一台发动机,由于安 ...

  9. HDU Today (图论)

    经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这时候,XHD夫妇也退居了二线,并在风景秀美的诸暨市浬 ...

  10. 它们的定义ListView，实现Item除去滑动和滑出菜单效果

    这个程序是基于变化从网上开源项目,详情货源忘记.懒得去搜索,.假设有不合适的地方.请与我联系作者.我会及时回复和处理! 序中主要包括两个ListView,一个是实现側滑删除.一个是側滑出菜单,代码中的 ...