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

【问题标题】：How to link external javascript file onclick of button如何在单击按钮时链接外部javascript文件
【发布时间】：2011-10-17 04:54:21
【问题描述】：

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

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

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

【问题讨论】：

您不能“调用 javascript 文件”。如果脚本文件已经加载，您可以“在该文件中调用 javascript 函数”。或者，如果尚未加载脚本文件，则可以“加载脚本文件”或“加载脚本文件并在其中调用函数”。以下哪一项是你想做的？
“调用外部js文件”并不意味着你可以在js文件中调用函数但不能调用文件。
从技术上讲，将包含一些简单代码或自执行函数的 JavaScript 文件加载到 dom 中，在功能上等同于直接调用函数。只加载一次函数并根据需要调用它会更有效。将 JS 函数调用添加到内联 HTML 打破了内容和状态之间的分离。所有 JS 都应该保存在 JS 文件中。
@jfriend00 - 我想在该文件中调用一个 javascript 函数。
如果包含该函数的javascript文件已经加载，那么直接调用javascript函数即可。加载 JS 文件后，顶层的所有 javascript 函数都可以使用。如果该函数被称为foo，则只需使用foo() 调用它。

标签： javascript

【解决方案1】：

我必须同意上面的 cmets，你不能调用文件，但你可以加载这样的 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>

【讨论】：

js文件中的函数在哪里调用？
在哪里？你的意思是怎么做？如果脚本已加载，您可以正常调用已加载脚本中的函数。或许您还想问更多问题？
忽略我的问题。我没有意识到这是在标记中调用的。感谢您的回复！

【解决方案2】：

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

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

alert('Hello world');

您必须将其更改为：

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

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

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

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

&lt;button onclick="functionName()"&gt;Call the function&lt;/button&gt;

我做了一个小例子。一个简单的 HTML 页面要求用户输入她的姓名，当她单击按钮时，将调用 Public/Scripts/filename.js 中的函数，将插入的字符串作为参数传递，以便弹出窗口显示“Hello, ！ ”。

这里是调用 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 + '!');
}

【讨论】：

对不起，我认为这很令人困惑。代码没有按预期运行，当有多个文件时使用jsfiddle.net 或其他东西。此外，我相信它不能回答问题。
这对我有帮助。我能够在将函数加载到主体后调用该函数，因此它根本不必加载到头部。
谢谢，这就是我想做的。从正文 html 中的驱动程序 Onclick 行调用外部 .js 文件。有点迂回，但它的工作原理。

【解决方案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." );
}

希望对您有所帮助！干杯！

-肯

【讨论】：

【解决方案4】：

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

example.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>

test.js：

alert('hello world')

【讨论】：

【解决方案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>

【讨论】：

我认为你不需要type="button"，而且我看不到id="jstrigger" 做了什么？

【解决方案6】：

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

【讨论】：