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

  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. 读改善c#代码157个建议：建议1~3

    目录: 建议一:正确操作字符串 建议二:使用默认转型方法 建议三:区别对待强制转型和as 建议一.正确操作字符串 1.确保尽量少的装箱 static void Main(string[] args) ...

  2. 4.4、Libgdx用法查询执行环境相关性

    (原版的:http://www.libgdx.cn/topic/46/4-4-libgdx%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%9F%A5%E8%AF%A2% ...

  3. [Visual Studio]透过Visual Studio 2012的选择性贴上将XML与JSON直接转成对应的类别

    原文:[Visual Studio]透过Visual Studio 2012的选择性贴上将XML与JSON直接转成对应的类别 在开发专案时若碰到要串接服务或是他人的API,常常避免不了都要面对XML或 ...

  4. Gradle digest

    task类型 copy task copyFiles(type: Copy) { from 'resources' into 'target' include '**/*.xml', '**/*.tx ...

  5. UVA1232 - SKYLINE(段树部分的变化)

    UVA1232 - SKYLINE(线段树区间改动) 题目链接 题目大意:依照顺序盖楼.假设这个位置(当前要盖的楼覆盖范围内)要新建的楼的高度>=之前就有的最大高度,那么就+1.最后输出这个+1 ...

  6. krpano漫游加方向性3D声音（这篇文章已被移到krpano中国网站 krpano360.com）

    需求:      在场景转换视角时.会出现不同方位的声音以及对应的音量变化,也即是将声音视作hotspot.当视角转到该声音热点时,也随之听到声音.官方样例:点击打开链接 本文已经搬迁到下述网址.请点 ...

  7. iptables的CLUSTER target以太网交换机和想法

    周末热风,这个想法从未在我的心脏像样的雨一阵悲哀. 每到周末,我会抽出一周整夜的事情的总结,无论是工作.人生,或者在上班或在锯的方式方法,并听取了抑制书评,因为无雨,周六晚上,我决定好好睡一觉,再折腾 ...

  8. 【LaTeX排版】LaTeX纸排版&lt;两&gt;

    1.文件夹的生成     直接使用命令\tableofcontents就可以. 其默认格式例如以下: 我们会发现.这种格式不一定是我们所期望的. 比方说,我们也希望章标题与页码之间也有点连线,而且也希 ...

  9. 对于VS相关的插件

    原文:对于VS相关的插件 本人使用这款IDE时间不长,但是很佩服其强大的功能. 编写代码时候的插件辅助,确实让人很舒服. 网上找了好多,有几个是很有用的,但是忘记了他们的网址,再次,总结下,也是给自己 ...

  10. JAVA8,SPRING,ANGULARJS对项目

    java8+spring+angularjs 项目应用 最近有写一个电子订单商务网站,使用JAVA8,SPRING,ANGULARJS对项目使用的技术和大家分享. 第一次写博客,哪有不对需要改正的请联 ...