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

  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，加载的时间顺序：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title></title>
  6.          <script src="2.js" type="text/javascript"></script>
  7.          <script type="text/javascript">
  8.               document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入
  9.               document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入
  10.               alert(1);
  11.               document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
  12.               alert(5);
  13.          </script>
  14.      </head>
  15.      <body>
  16.      </body>
  17.  </html>

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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title></title>
  6.          <script src="2.js" type="text/javascript"></script>
  7.          <script type="text/javascript">
  8.               document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入
  9.               document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入
  10.               alert(1);
  11.               document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
  12.               alert(5);
  13.          </script>
  14.      </head>
  15.      <body>
  16.      </body>
  17.  </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. Afinal载入网络图片及下载文件用法

    Afinal高速开发框架使用起来很方便.以下将解说怎样利用Afinal载入网络图片及下载文件: 先看效果图: 注意:使用Afinal前需加入Afinal的jar,能够在这里下载:http://down ...

  2. C++ Primer 学习笔记_41_STL实践与分析（15）--先来看看算法【下一个】

    STL实践与分析 --初窥算法[下] 一.写容器元素的算法 一些算法写入元素值.在使用这些算法写元素时一定要当心.必须.写入输入序列的元素 写入到输入序列的算法本质上是安全的--仅仅会写入与指定输入范 ...

  3. C++ Primer笔记4_静态成员类_IO库

    1.静态成员类 static成员变量与函数 static成员变量:必须在类外初始化.(const或引用类型变量必须在构造函数初始化列表里初始化) static成员函数: 不依赖于类.相当于类里的全局函 ...

  4. 定制Attribute

    目录 Attribute是什么 自定义Attribute 一.Attribute是什么 将一些附加信息与制定目标相关联的方式.编译器在元数据中生成这些额外的信息.也叫做特性. 比如之前文章中提到的:枚 ...

  5. Nginx+Php-fpm+MySQL+Redis源码编译安装指南

    说明:本教程由三部分组成如下: 1.      源码编译安装Nginx 2.      源码编译安装php以及mysql.redis扩展模块 3.      配置虚拟主机 文中所涉及安装包程序均提供下 ...

  6. Struts2大约Action系统培训6大约action的接受三个参数的方法

    我们知道,action在web它在控制器的发展起到了一定作用,通过接收client来到参数,运行不同的模块只实现运营,因此,接收参数是非常重要的组成部分,有接收到的参数的仅前端.操作权限运行数据库后端 ...

  7. kendoui仪表板和直方图 演示样本

    到那个时刻kendeodui我相信大家一定不陌生.该js在绘画方面的好成绩. 现在来看看 它的仪表盘和直方图效果: html和js代码例如以下: <!DOCTYPE html> <h ...

  8. Android定调的发展

    首先,介绍一下Android系统支持的铃声格式. 有下面几种: 64赫兹Midi,AAC.AAC+.AMR.WAV.MP3.Real Audio.WMA.OGG等格式. 将音频文件设置成铃声非常eas ...

  9. Javascript设计模式与开发实践读书笔记（1-3章）

    第一章 面向对象的Javascript 1.1 多态在面向对象设计中的应用   多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切 ...

  10. JS前端正则表达式学习笔记（转）

    1.正则表达式的创建: 方法一:以字面量形式来创建 格式为/pattern/flags;其中pattern(模式)为任何简单或者复杂的表达式,可以包括字符类,限定符,分组,向前查找以及反向引用.每个正 ...