在頁面中引入js的兩種方法(推薦)

更新時間：2017年08月29日 08:06:31 作者：minigun

下面小編就為大家?guī)硪黄陧撁嬷幸雑s的兩種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在頁面中引入js有兩種基本方式：在頁面中嵌入js、引用外部js文件。

一、在頁面中嵌入js

這是在頁面使用js最簡單的方式了，一般我在寫個小測試的情況下會用這種方式。

把script元素寫在</body>前面，script元素的內容就是js代碼。像這樣：

<script>
// 在這里寫js
function test(){
alert('說點什么呢'); 
}
test();
</script>

二、引用外部js文件

引用外部js文件，可以使js文件和HTML文件相分離、一個js文件可被多個HTML文件使用、維護起來也更方便等等。

用法是把script元素的src屬性，設置為js文件的URL即可，如：

<script src="js/test.js"></script>

三、script元素在HTML文件中的位置

如果把script元素放在head元素里，就像這樣：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="xxx.js"></script>
</head>
<body>
<!--頁面內容-->
</body>
</html>

這樣做的話，待瀏覽器經(jīng)過下載、解析、執(zhí)行完js文件之后，才會呈現(xiàn)頁面內容。如果一個頁面需要很多個js文件，那么瀏覽器可能會出現(xiàn)短暫的“白板”，用戶體驗不好。

所以，我們應該把js文件放在</body>的前面，這樣瀏覽器會先展現(xiàn)頁面給用戶。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<script src="xxx.js"></script>-->
</head>
<body>
<!--頁面內容-->
<script src="xxx.js"></script>
</body>
</html>

以上這篇就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

在父頁面調用子頁面的JS方法

JavaScript SHA1加密算法實現(xiàn)詳細代碼
這篇文章主要為大家詳細介紹了JavaScript SHA1加密算法實現(xiàn)代碼，具有一定的參考價值，感興趣的朋友可以參考一下
2016-10-10
Javascript對象屬性方法匯總
這篇文章主要是對Javascript對象屬性方法進行了詳細的匯總介紹。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
offsetHeight在OnLoad中獲取為0的現(xiàn)象
需要獲取div的高度時，往往需要用到offsetHeight，有時會碰到offsetHeight獲取到為0的現(xiàn)象，感興趣的朋友可以參考下面的代碼片段
2013-07-07
JS 中forEach，for in、for of用法實例總結
這篇文章主要介紹了JS 中forEach，for in、for of用法,結合實例形式總結分析了JS 中forEach，for in、for of的基本功能、使用方法與相關注意事項,需要的朋友可以參考下
2023-05-05
echarts餅圖指示器文字顏色設置不同實例詳解
在默認的餅狀圖里面,圖例legend顏色是黑色的,有時候根據(jù)ui需要,根據(jù)不同的背景色,需要將圖例文字調成白色或者其他顏色,下面這篇文章主要給大家介紹了關于echarts餅圖指示器文字顏色設置不同的相關資料,需要的朋友可以參考下
2022-07-07
ES6 Promise對象概念與用法分析
這篇文章主要介紹了ES6 Promise對象概念與用法,簡單分析了Promise對象的基本狀態(tài)與三種重要方法,并結合實例形式給出相關使用技巧,需要的朋友可以參考下
2017-04-04
淺析Echarts圖表渲染導致內存泄漏的原因及解決方案
在今年某個可視化大屏項目中,出現(xiàn)了一個問題,項目在運行一段時間后,頁面出現(xiàn)了崩潰,而且是大概運行幾天之后,因為大屏項目是部署到客戶現(xiàn)場大屏,長時間運行不關閉,小編認為 Echarts 圖表渲染導致了內存泄漏,本文將深入分析這一問題,并提供解決方案
2023-10-10
微信小程序實現(xiàn)文字無限輪播效果
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)文字無限輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
JS判斷微信掃碼的方法
這篇文章通過代碼給大家介紹了JS判斷是否是微信掃碼的方法，非常不錯，需要的朋友參考下吧
2017-08-08
showModalDialog在谷歌瀏覽器下會返回Null的解決方法
showModalDialog的返回值在IE、火狐下面都能夠獲取返回值，但是在谷歌瀏覽器下面會返回Null，下面有個不錯的解決方法，感興趣的朋友可以參考下
2013-11-11