如何使用外部的".js"文件

Question

如何使用外部的".js"文件

49

我有以下两个JavaScript函数：

1

showCountry()

2

showUser()

我希望将它们放在外部的“.js”文件中。

<a href="javascript:showCountry('countryCode')">countryCode</a>

2

<form>
 <select name="users" onChange="showUser(this.value)">
 <option value="1">Tom</option>
 <option value="2">Bob</option>
 <option value="3">Joe</option>
 </select>
</form>

如何正确调用这些函数的语法？

- blsn

3

创建一个独立的 JavaScript 文件，将需要编写的函数或其他代码放入其中，并在你的 HTML 页面中使用以下的脚本标签引用该文件：<script type='text/javascript' language='javascript' src='外部 JavaScript 文件路径'/>。 - Lion

2

在调用函数之前，您应该加载外部JS文件。 - Shreedhar

1

在一个单独的JavaScript文件中，使用document.getElementById('users').addEventListener('change', showUser, false);比使用onchange更好。 - uınbɐɥs

注意：在外部脚本文件中，要确切地指向您将编写脚本的位置。w3schools.com - HTML <script> src 属性 - Guy Coder

3

我知道这篇文章已经是老帖子了（超过5年），但因为在谷歌搜索结果中排名靠前，我认为有必要补充一下。根据你所引用的W3Schools，你应该在通常写脚本的地方引用脚本，而其他人则认为应该在<head>标签中引用，但这可能会引起问题。我已经阅读并发现，在文档末尾的<body>结束标记之前引用外部脚本非常有用。这样可以在运行任何脚本之前加载整个<body>内容，从而避免在尚未“存在”的元素上运行脚本。 - mrkd1991

你如何从外部JavaScript文件调用另一个外部JavaScript文件？换句话说，我们想要将head部分中的JS调用次数最小化。 - user3120861

6个回答

21

注意：不要在外部JavaScript文件中使用script标签。

<html>
<head>

</head>
<body>
    <p id="cn"> Click on the button to change the light button</p>
    <button type="button" onclick="changefont()">Click</button>

     <script src="external.js"></script>
</body>

外部 JavaScript 文件：

        function changefont()
            {

                var x = document.getElementById("cn");
                x.style.fontSize = "25px";           
                x.style.color = "red"; 
            }

- Sachindra N. Pandey

6

在您的 head 元素中添加：

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

- walrii

4

在你的HTML文件中，除此之外使用方式不变。但是，你可以改为“不显眼的JavaScript”(unobtrusive javascript)风格——将功能附加到脚本内的HTML中，而不是在HTML内联使用。http://en.wikipedia.org/wiki/Unobtrusive_JavaScript - Julian

4

这是在 HTML 标记中引入外部 JavaScript 文件的方法。

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

在包含外部文件时，请确保路径和文件名正确，其中external-javascript.js是要包含的外部文件。

<a href="javascript:showCountry('countryCode')">countryCode</a>

上述方法适用于锚标签且完美无缺。但对于其他元素，您应该明确指定事件。

示例:

<select name="users" onChange="showUser(this.value)">

感谢您，XmindZ。

- Xmindz

关于<a>标签的问题已经在这里和这里广泛讨论过。尽管它可以工作，但不建议将Javascript放在href中。 - Adi

3

您可以像这样将JavaScript添加到body段中：

您可以简单地将JavaScript添加到body段中，如下所示：

<body>

<script src="myScript.js"> </script>
</body>

myScript是你JavaScript文件的文件名。只需编写代码，尽情享受！

- sham133

4

欢迎来到StackOverflow。请更具体地描述如何将JavaScript文件包含到HTML中。 - Matt

2

我希望这里有人可以得到帮助：我遇到了一个问题，需要使用JavaScript来操作一些动态生成的元素。将代码包含到我的外部.js文件中，并在头部区域引用它，它能够完美地工作。但是，之后脚本中的任何内容都无法工作。尝试在Firefox上使用开发者工具，返回新元素的变量值为null。我决定将脚本标签移到html文件的底部，就在< /body >标签之前，然后所有脚本的部分都重新开始正常响应。

- user7417428

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jalpesh Patel · Accepted Answer

像这样的代码

 <html>
    <head>
          <script type="text/javascript" src="path/to/script.js"></script>
          <!--other script and also external css included over here-->
    </head>
    <body>
        <form>
            <select name="users" onChange="showUser(this.value)">
               <option value="1">Tom</option>
               <option value="2">Bob</option>
               <option value="3">Joe</option>
            </select>
        </form>
    </body>
    </html>

我希望这能帮到你...谢谢