如何在单击按钮时链接外部 javascript 文件

Question

我想在外部 JS 文件中调用一个 javascript 函数，在这个文件form.tmpl.htm的按钮上使用onClick函数。

  <button type="button" value="Submit" onClick="Call the external js file" >

javascript 文件位于Public/Scripts/filename.js 。 我在template/form.tmpl.html有一个模板文件。 根文件夹包含Public和template文件夹。

Answer 1

我必须同意上面的评论，你不能调用一个文件，但你可以像这样加载一个 JS 文件，我不确定它是否能回答你的问题，但它可能会有所帮助......哦，我已经用过在我的例子中是一个链接而不是一个按钮......

<a href='linkhref.html' id='mylink'>click me</a>

<script type="text/javascript">

var myLink = document.getElementById('mylink');

myLink.onclick = function(){

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "Public/Scripts/filename.js."; 
    document.getElementsByTagName("head")[0].appendChild(script);
    return false;

}


</script>

Answer 2

如果你想让你的按钮调用你在 filename.js 中编写的例程，你必须编辑 filename.js 以便你想要运行的代码是一个函数体。 因为您可以调用函数，而不是源文件。 （源文件没有入口点）

如果您的 filename.js 的当前内容是：

 alert('Hello world');

您必须将其更改为：

 function functionName(){ alert('Hello world'); }

然后你必须在你的 html 页面的标题中加载filename.js ：

 <head> <script type="text/javascript" src="Public/Scripts/filename.js"></script> </head>

以便您可以通过按钮调用filename.js 中包含的函数：

 <button onclick="functionName()">Call the function</button>

我做了一个小工作示例。 一个简单的 HTML 页面要求用户输入她的名字，当她点击按钮时，Public/Scripts/filename.js 中的函数被调用，将插入的字符串作为参数传递，这样一个弹出窗口就会说“你好，<insertedName>！ ”。

这是调用 HTML 页面：

 <html> <head> <script type="text/javascript" src="Public/Scripts/filename.js"></script> </head> <body> What's your name? <input id="insertedName" /> <button onclick="functionName(insertedName.value)">Say hello</button> </body> </html>

这里是 Public/Scripts/filename.js

 function functionName( s ){ alert('Hello, ' + s + '!'); }

Answer 3

通过先加载.js文件，然后通过 onclick 调用函数，编码更少，发生的事情也很明显。 我们将调用 JS 文件zipcodehelp.js 。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Button to call JS function.</title>
</head>
<body>
    <h1>Use Button to execute function in '.js' file.</h1>
    <script type="text/javascript" src="zipcodehelp.js"></script>
    <button onclick="ZipcodeHelp();">Get Zip Help!</button>
</body>
</html>

zipcodehelp.js的内容是：

function ZipcodeHelp() {
  alert("If Zipcode is missing in list at left, do: \n\n\
    1. Enter any zipcode and click Create Client. \n\
    2. Goto Zipcodes and create new zip code. \n\
    3. Edit this new client from the client list.\n\
    4. Select the new zipcode." );
}

希望有帮助！ 干杯!

——肯

Answer 4

这是完全有可能的，我根据 Mike Sav 的例子做了类似的事情。 那是 html 页面，应该是同一文件夹中的外部 test.js 文件

示例.html：

<html>
<button type="button" value="Submit" onclick="myclick()" >
Click here~!
<div id='mylink'></div>
</button>
<script type="text/javascript">
function myclick(){
    var myLink = document.getElementById('mylink');
    myLink.onclick = function(){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "./test.js"; 
            document.getElementsByTagName("head")[0].appendChild(script);
            return false;
    }
    document.getElementById('mylink').click();
}
</script>
</html>

测试.js：

alert('hello world')

Answer 5

您可以简单地执行以下操作。

假设您的根文件夹中有名为myscript.js的 JavaScript 文件。 在 html 文件的 head 标签中添加对 javascript 源文件的引用。

<script src="~/myscript.js"></script>

JS 文件：（ myscript.js ）

function awesomeClick(){
  alert('awesome click triggered');
}

HTML

<button type="button" id="jstrigger" onclick="javascript:awesomeClick();">Submit</button>

Answer 6

看起来，在外部js文件中调用函数是不可能的（在chrome Version 63.0.3239.132上测试）。 我在很多方面尝试过，但事实并非如此。 我必须使用事件监听器。

Answer 7

您可以在head标记中加载所有脚本，以及在函数大括号中执行的任何脚本。 但是，如果您在脚本之外使用这些变量，请确保更改变量的范围。

Answer 8

向头部添加动态脚本您可以编写函数并添加一个带有js文件路径的src的脚本元素

如何在单击按钮时链接外部 javascript 文件

问题描述

6 个解决方案

解决方案1
53 已采纳 2011-10-17 05:48:45

解决方案2
48 2015-02-18 10:46:29

解决方案3
8 2017-03-18 00:18:21

解决方案4
6 2015-08-27 09:25:20

解决方案5
2 2015-07-14 19:29:02

解决方案6
1 2018-02-20 04:11:27

解决方案7
0 2016-04-13 20:00:39

解决方案8
0 2018-01-11 02:06:16

如何在单击按钮时链接外部 javascript 文件

问题描述

6 个解决方案

解决方案1 53 已采纳 2011-10-17 05:48:45

解决方案2 48 2015-02-18 10:46:29

解决方案3 8 2017-03-18 00:18:21

解决方案4 6 2015-08-27 09:25:20

解决方案5 2 2015-07-14 19:29:02

解决方案6 1 2018-02-20 04:11:27

解决方案7 0 2016-04-13 20:00:39

解决方案8 0 2018-01-11 02:06:16

解决方案1
53 已采纳 2011-10-17 05:48:45

解决方案2
48 2015-02-18 10:46:29

解决方案3
8 2017-03-18 00:18:21

解决方案4
6 2015-08-27 09:25:20

解决方案5
2 2015-07-14 19:29:02

解决方案6
1 2018-02-20 04:11:27

解决方案7
0 2016-04-13 20:00:39

解决方案8
0 2018-01-11 02:06:16