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

  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. Windows Phone 启动器

    http://msdn.microsoft.com/zh-CN/library/gg278408(v=vs.92)#BKMK_Launchers using Microsoft.Phone.Contr ...

  2. 随笔 - Internet缓存文件

    Internet缓存文件 本文地址: http://blog.csdn.net/caroline_wendy 互联网上全部的使用记录, 图片, 音乐, 视频, 都会缓存在本地. 1. 位置: IE-& ...

  3. EMVTag系列5《8E 持卡人验证方法(CVM)名单》

    L: var. up to 252 -R(需求):数据必须存在,在读应用数据过程中,终端不检查 依照优先顺序列出卡片应用支持的全部持卡人验证方法 注:一个应用中能够有多个CVM列表,比如一个用于国内交 ...

  4. android 拍照注意问题

    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, reqCode) ...

  5. android:更改PagerTabStrip背景颜色，标题字体样式、颜色和图标，以及指示条的颜色

    1.更改PagerTabStrip背景颜色 我们直接在布局中设置background属性可以: <android.support.v4.view.ViewPager android:id=&qu ...

  6. Go如何使用实现继承的组合

    Go它提供了一个非常值得称道的并发支持,但Go它不支持完全面向对象的.这并不意味着Go不支持面向对象,,和Go的OO系统做的很轻巧,学习降至最低成本.向对象让Go失去了一些OO的方便特性,可是更高的效 ...

  7. 大数据系列修炼-Scala课程08

    接下来会讲解关于各种模式匹配,从中就会知道模式匹配的重要性 关于Type.Array.List.Tuple模式解析 1.Type模式匹配代码解析 //关于Type类型的模式匹配 //匹配 Int类型. ...

  8. javascript系列之DOM(二)

    原文:javascript系列之DOM(二) 原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一 ...

  9. 怎样用OleDbDataAdapter来对数据库进行操作？

      请问怎样用OleDbDataAdapter来对数据库进行删除.改动和加入? OleDbDataAdapter是DataSet和数据源之间建立联系的重要纽带.用它我们能够对数据库进行删除.改动和加入 ...

  10. python_random随机

    在数据清洗,评估 ,抽验等等过程中,经常有这样的应用场景 : 需要在一个大的数据集合中随机出来样本,进行人工评估.为了保证足够随机,借助脚本来实现. 下面一个脚本  ,用于应对这种应用场景. 使用方法 ...