js 引入外部文件之 script 標籤

時間 2019-11-12

原文原文鏈接

在個人理解看來，html 就是一個單純的管顯示問題，js就是單純的管動做問題，css就是單純的管佈局問題，這三個構成了一個網頁css

在HTML中，常常會用到引入js 文件。html

引入js的方法很簡單：json

1. 1 就是加入一個script 標籤，引入一個源文件爲test.txt 的文件api

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./test.txt"></script>
 9     <script>
10         alert( a );
11     </script>
12 </head>
13 <body>
14     
15 </body>
16 </html>

在上面 test.txt 的內容爲： var a = 100;跨域

運行結果：app

1.2 引入的源文件內容是一個函數，也是能夠的；函數

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script>
 9         function fn( data ){
10             alert( data );
11         }
12     </script>
13     <script>
14         window.onload = () => {
15             var oBtn = document.querySelector("input");
16             oBtn.onclick = () => {
17                 var oScript = document.createElement("script");
18                 oScript.src = "./test2.txt";
19                 document.body.appendChild( oScript );
20             }
21         }
22     </script>
23 </head>
24 <body>
25    <input type="button" value="點擊添加 script 標籤"> 
26 </body>
27 </html>

點擊動態添加：script 標籤，script的src屬性爲test2.txt佈局

test2.txt的內容爲：ui

fn( 100 );
fn('nihao!');
fn("這個是動態調用的script標籤！");

調用三次fn()函數url

運行結果：彈出三次調用的結果

從上面看出，script標籤能夠動態調用外部文件

2. XMLHttpRequest 調用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         window.onload = function(){
 8             var oBtn = document.getElementById("btn");
 9             oBtn.onclick = function(){
10                 var xhr = new XMLHttpRequest();
11                 var url = 'https://api.douban.com/v2/book/27027055';
12                 xhr.onreadystatechange = function(){
13                     if( xhr.readyState == 4 && xhr.status == 200 ){
14                        alert( xhr.responseText );
15                     }
16                 }
17                 xhr.open("GET", url, true);
18                 xhr.send(null);
19             }
20         }
21     </script>
22 </head>
23 <body>
24 <input type="button" value="獲取書籍信息" id="btn">
25 </body>
26 </html>

結果報錯：

2.2 換一種方式調用：加 script 標籤，在標籤中調用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>     
 7     li{
 8         list-style-type: none;
 9     }
10     </style>
11     <script>
12         function show(data) {
13             //建立一個p元素
14             var oP = document.createElement("p");
15             //給建立的p元素添加內容，內容爲data對象的title屬性
16             oP.innerHTML = data.title;
17             //建立一個img對象
18             var oImg = new Image();
19             //給img對象獲取圖片地址
20             oImg.src = data.image;
21             // 在body元素內添加p節點
22             document.body.appendChild( oP );
23             // 在body元素內添加img節點
24             document.body.appendChild( oImg );
25             var oLi = document.createElement("li");
26             oLi.innerHTML = data.catalog;
27             document.body.appendChild( oLi );
28         }
29     </script>
30     <script>
31         window.onload = function () {
32             var oBtn = document.getElementById("btn");
33             oBtn.onclick = function () {
34                 // 至關於在這裏執行了一個show()函數的調用
35                 var oScript = document.createElement("script");
36                 oScript.src = "https://api.douban.com/v2/book/27027055?callback=show";
37                 document.body.appendChild(oScript);
38             }
39         }
40     </script>
41 </head>
42 <body>
43 <input type="button" value="獲取圖書" id="btn">
44 </body>
45 </html>