页面中引入js的几种方法

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

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

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

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

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

转载于:https://www.cnblogs.com/lonelybonze/p/javascript.html

页面中引入js的几种方法相关推荐

HTML引入JS的两种方法
1.HTML引入JS的两种方法: 引入js的第一种方法 <!DOCTYPE html> <html lang="en"> <head> ...
html 如何给图片打标签,图文详解HTML页面中添加图片的三种方法
在页面布局时,经常需要在页面中插入图片,那你知道如何在HTML中添加图片吗?这篇文章就给大家介绍HTML页面中插入图片的三种方法,感兴趣的朋友可以参考一下,希望对你有所帮助. 方法一.用HTML中的i ...
JSP页面中引入js文件
1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script> </script>之间,看是否能够正常运行,如果不能,请核查代码 2) 如果引入的代码在当 ...
JavaScript程序基础（一）网页中引入Javascript的三种方法
JavaScript是一种基于对象的脚本编程语言,具有动态.跨平台.基于对象和安全等特性.它不需要经过编译,而是直接嵌入在HTML页面中运行,可把单纯的HTML页面转变成支持用户交互和事件响应的动态页 ...
a 中调用js的几种方法整理及使用推荐
我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...
a 标签中调用js的几种方法
我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...
a 中调用js的几种方法
我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...
SpringMVC项目中HTML页面中引入js
一.引入js文件,要写成下面这样,写成简写的形式<sprint/>会加载不了: <script type="text/javascript" th:src=&qu ...
关于在JS中引入JS文件的JQ方法
jQuery ajax - getScript() 使用$.getScript()方法就可以进行加载JS文件的代码过来,但是通常这个函数并没有什么作用,因为它是使用传统的ajax进行js代码请求的,所 ...
HTML页面中插入图片的几种方法
1 直接使用 img 标签 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

页面中引入js的几种方法

页面中引入js的几种方法相关推荐

最新文章

热门文章