将外部JavaScript文件链接到HTML

我是JavaScript新手，尝试将我的JavaScript代码链接到HTML。除了下面提到的代码，我还尝试了下面的脚本标记在HTML中的变化，但没有一个工作。将外部JavaScript文件链接到HTML

请让我知道如何将我的外部文件链接到HTML。

这里是我的文件夹结构：

的是我曾尝试例子 -

<script type="text/javascript" src="~/js/vehicle.js">    
    </script> 

<script type="text/javascript" src="~/Source Pakages/js/vehicle.js">    
    </script> 

<script type="text/javascript" src="../js/vehicle.js">    
    </script> 

<script type="text/javascript" src="../vehicle.js">    
    </script>

的index.html -

<html> 
<head> 

    <script type="text/javascript" src="G:\ajaxx\src\java\js\vehicle.js">    
    </script> 

</head> 
<body onload = "loadMovies()"> 
    <div id = "p1"></div> 
</body> 
</html>

vehicle.js -

function loadMovies() 
{ 
    document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>' 
}

来源

2016-12-25 krishna

'SRC = “../源Pakages/JS/vehicle.js”' – David

小记到G：\路径：该路径被加载*由浏览器*所以路径需要绝对*浏览器视图*所以总是协议：//yourserver.com/path/to/file –

使用此：

<script type="text/javascript" src="../Source Packages/js/vehicle.js"></script>

来源

2016-12-25 14:54:13 ab29007

请检查目录正确 –

对此感到抱歉。我在编辑它，当你评论。但感谢您指出 – ab29007

我试过上面的代码，并在Chrome和边缘浏览器中运行该程序，但它仍然显示一个空白屏幕。 – krishna

使用本下面的代码，

<html> 
<head> 
    <script type="text/javascript" src="../Source Pakages/js/vehicle.js">    
    </script> 
</head> 
<body onload = "loadMovies()"> 
    <div id = "p1"></div> 
</body> 
</html>

来源

2016-12-25 14:56:04

我试过上面的代码，并在Chrome和边缘浏览器中运行该程序，但它仍然显示一个空白屏幕。 – krishna

而且，把你的函数loadMovies（）脚本标签中

<script> 
    function loadMovies() { 
    ... 
    } 
    </script>

来源

2016-12-25 14:57:01

通常情况下，大多数的JavaScript代码被放入外部文件，该文件附加到HTML，如下所示：

<script src="/path/to/script.js"></script>

/path/to/script.js是一个相对路径。如果您有特定位置，包括绝对路径的完整网址。相对路径相对于您在网站上的当前位置。

你可以使用它作为

<script type="text/javascript" src="../Source Pakages/js/vehicle.js"></script>

这是你的代码将如何看起来像

<html> 
<head> 
<script type="text/javascript" 
     src="../Source Pakages/js/vehicle.js"> 
</script>  
     <script type="text/javascript"> 
     function loadMovies() 
     { 
     document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>' 
     } 


     </script> 
    </head> 
    <body onload = "loadMovies()"> 
     <div id = "p1"></div> 
    </body> 
</html>

来源

2016-12-25 14:59:38

它看起来像你正试图适应您复制的代码，因为你loadMovies()功能无关用电影做。借用代码并使其适应您的情况是可以的，但您应该更改名称以适应功能。它使您的代码更易于阅读。

如果您的JavaScript文件与您的HTML文件位于同一目录中，您可以使用<script src="vehicle.js"></script>，但这并不意味着您必须按照目录树查找.js文件的位置。在你的情况下，这意味着上升两个级别，然后像这样下降两个级别。 <script src="../../Source Packages/js/vehicle.js"></script>。我还假设您在关闭</html>标记后显示的JavaScript是您的.js文件的内容......对吧？

由于您在Windows计算机上，您的文件路径看起来有点不同，但并不多。您只需将'/'更改为'\'，它应该都可以工作。这里有两个例子。第一个是'NIX机器（Unix，Linux，OSX等），第二个（适用于你）适用于Windows机器。请注意，尽管您的电脑可能是基于Windows的，但您的代码所在的服务器可能不是，因此了解其差异很重要。

（对于“NIX机）的index.html -

<html> 
    <head> 
    <script type="text/javascript" src="../../Source Packages/js/vehicle.js"></script> 
    </head> 
    <body onload = "loadVehicles()"> 
    <div id = "p1"></div> 
    </body> 
</html>

vehicle.js -

function loadVehicles() { 
    document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>'; 
}

（对于Windows机器）的index.html -

<html> 
    <head> 
    <script type="text/javascript" src="..\..\Source Packages\js\vehicle.js"></script> 
    </head> 
    <body onload = "loadVehicles()"> 
    <div id = "p1"></div> 
    </body> 
</html>

vehicle.js -

function loadVehicles() { 
    document.getElementById("p1").innerHTML = ' <select>'+ 
     ' <option value="volvo">Volvo</option>'+ 
     ' <option value="saab">Saab</option>'+ 
     '<option value="mercedes">Mercedes</option>'+ 
     '<option value="audi">Audi</option>'+ 
     '</select>'; 
}

当然这是假定的文件夹结构是

来源

2016-12-25 15:22:02 quarterpi

是的，我从我之前尝试的一个示例中复制了代码。由于输出不是即将到来的，因此主要关注的是获得它。一旦代码正常工作，我会编辑名称。是的之后的代码是我的javascript代码。 – krishna

@krishna你有没有尝试过我建议的路径？ – quarterpi

是的，我尝试了下面提到的所有组合，并尝试在chrome和边缘浏览器中检查输出，但输出在两个浏览器上都是空白屏幕。如果可能，请尝试系统上的代码，并告知它是否正常工作。通过我使用 IDE是Netbeans的8.1 <脚本类型= “文本/ JavaScript的” SRC = “vehicle.js”> <脚本类型=” text/javascript“src =”../../ Source Packages/js/vehicle.js“> – krishna

将外部JavaScript文件链接到HTML

回答

相关问题