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

  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. 不一样的是不一样的,我的独家滚动条------Day35

    在您开始建立自己的,感觉应该先录一个概念:内核的浏览器. 兼容性问题之前多次提及,而在平时经常会遇到兼容性问题.原因,就在于它:浏览器内核.这是比較通俗的说法,事实上应该把它描写叙述的专业点:Rend ...

  2. 设计模式--简单工厂VS工厂VS抽象工厂

    前几天我一直在准备大学毕业生,始终绑起来,如今,终于有时间去学习设计模式.我们研究今天的话题是植物三口之家的设计模式的控制--简单工厂VS工厂VS抽象工厂. 经过细心推敲,我们不难得出:工厂模式是简单 ...

  3. Cocos2d-x源代码解析(1)——地图模块(3)

    接上一章<Cocos2d-x源代码解析(1)--地图模块(2)> 通过前面两章的分析,我们能够知道cocos将tmx的信息结构化到 CCTMXMapInfo.CCTMXTilesetInf ...

  4. 如何实现Web聊天

    假设你web聊天不知道这件事情,那么最好的方法可能是:openfire+jsjac openfire它是java做开源xmppserver,jsjac它是javascript做开源的Web版本xmpp ...

  5. SharePoint Search之(两)持续抓取Continues crawl

    于SharePoint 2010与在先前的版本号.有两种类型的抓取,Full和Incremental.故名思议.Full Crawl 抓取的时间.该Content Source里面的内容再次攀升.In ...

  6. java_访问权限修饰符

    java的访问权限修饰符有四种,根据权限由大到小的顺序为:public,protected,包访问权限(默认,没有修饰符),private. 根据修饰的东西不同,详细介绍如下: 1.修饰类的话分为两种 ...

  7. GitBook 配置说明

    1. 下载并安装 npm node-v0.12.0.pkg http://nodejs.org/download/ 2. 安装 gitbook $ sudo npm install gitbook-c ...

  8. NSIS:安装、卸载时检查程序是否正在运行

    原文 NSIS:安装.卸载时检查程序是否正在运行 如果我们要安装或升级的程序正在运行,文件肯定会替换不成功,以下代码可以提示用户结束正在运行的程序. 需要使用插件FindProcDLL.dll,下载路 ...

  9. Hadoop Java Hdfs API

    1. 在本地文件系统生成一个文本文件,,读入文件,将其第101-120字节的内容写入HDFS成为一个新文件2. 在HDFS中生成文本文件,读入这个文件,将其第101-120字节的内容写入本地文件系统成 ...

  10. Oracle to_char,to_date

    一.在oracle中,当想把字符串为‘2011-09-20 08:30:45’的格式转化为日期格式,我们可以使用oracle提供的to_date函数. sql语句为: SELECT to_date(' ...