如何从<script>标签中调用JavaScript函数？

Question

如何从<script>标签中调用JavaScript函数？

27

<html>
 <script>
    //some largeFunction()

    //load a script dynamically based on the previous code
    document.write("<script src='//...'><\/script>");
 </script>
</html>

问题: 是否可能将 largeFunction() 从静态 html 页面中移动到一个 js 文件中? 如果可以，我该如何在编写 <script> 标签之前静态调用该函数?

- membersound

2

可以的。您可以将整个函数移动到另一个文件中，然后加载该文件。关于调用函数，您可以在此文件后面添加另一个脚本标签来调用它。您还可以查看 IIFE 或 window.onload。这些也可以在该文件中。 - Rajesh

只需要将加载js文件的< script >标签放在创建新< script >标签之前即可。 - Hacketo

你试过了吗？在我看来，从单独的文件中使其工作似乎是可能的。无论如何，它都可以访问文档对象。 - shershen

注意！如果此脚本涉及DOM元素，请确保在整个HTML加载完成后再加载此文件。或者使用window.onload来确保要操作的元素已经渲染完毕。 - Rajesh

可选/延迟加载是必需的吗？ - Halcyon

如果largefunction决定了以下脚本文件的结果，也将其移动到largefunction中。 - mplungjan

4个回答

11

您可以尝试以下选项：

LargeFunction.js

function largeFunction(){
  // This is a global function and is a part of window object.
  // This can be called from anywhere once the file is loaded.
}

首页.html

<script src="largeFunction.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

IIFE

立即调用函数表达式是指在文件加载时仅执行一次的函数。它们在编译时立即被调用。

function largeFunction(){
  
}

(function(){
  largeFunction();
})()

您甚至可以尝试不使用IIFE

function largeFunction(){
  
}
largeFunction();

window.onload / $(document).ready()

这些事件在所有元素都被渲染后才会触发。如果您的JavaScript代码正在操作任何元素，例如管理UI状态、创建控件（如日期选择器或搜索下拉列表）或向

- Rajesh

感谢您解释IIFE！ - James Baker

3

不谈论JavaScript模块等细节，我将介绍最简单的方法让您继续前进，并留下让您根据需要进行优化。假设您将largeFunction()放入名为myScript.js的单独文件中，那么您的HTML页面设置将如下所示：

<html>
 <script type="text/javascript" src="myScript.js"></script>
 <script>
    largeFunction();

    //load a script dynamically based on the previous code
    document.write("<script src='//...'><\/script>");
 </script>
</html>

如您所见，您只需要确保在当前脚本标签之前引用外部脚本文件。从那里开始，您可以像在HTML中嵌入函数一样调用 largeFunction()。

- Brian Driscoll

1

提醒一下，如果您尝试在连接速度较慢的设备上运行脚本，使用document.write可能会引发警告或被直接阻止：https://developers.google.com/web/updates/2016/08/removing-document-write - Darren S

这个回答已经很久了，但我同意现在我可能会使用require或include。 - Brian Driscoll

2

如果你在JavaScript中获取DOM元素并添加事件处理程序，就不必将函数放在HTML页面上。你可以只创建JS文件并使用脚本标签链接它。最好把脚本标签放在页面底部，以确保所有DOM已加载。

示例：

var getDomJquery = $("#got-Some-dom").on( "click", function(){
    // do some cool JS DOM stuff here
});


var getDomPureJs = document.getElementById("got-Some-dom").on( "click", function(){
    // do some cool JS DOM stuff here
});

在您的 HTML 中靠近页面底部。

<script src="myJsFile.js"></script>

- andre mcgruder

但是我希望在渲染完成之前初始化这些东西。在加载过程中，可以执行 myJsFile.js 中的函数但不直接触发它吗？ - membersound

1

是的，你可以使用 document.load( /////在此处输入你的代码。)。 - andre mcgruder

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

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

- MortenMoulder · Accepted Answer

简短回答：可以。

只要您首先加载包含该函数的第一个脚本，您就可以在任何地方调用该函数，只要它已被首先加载。

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

在这个例子中，请确保 file1.js 文件包含你的 largeFunction() 函数。然后你可以在 file2.js 内调用 largeFunction();。

你也可以这样做：

<script src="file1.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

请确保你的第一个脚本包含了这个函数。