如何从<script>标签调用javascript函数？
[英]How to call javascript function from <script> tag?
问题描述
<html>
<script>
//some largeFunction()
//load a script dynamically based on the previous code
document.write("<script src='//...'><\/script>");
</script>
</html>
问题：是否可以将largeFunction()移出静态html页面并将其放入js文件中？ 如果是，我怎么能在写<script>标签之前静态调用该函数？
4 个解决方案
解决方案1
15 已采纳 2016-02-24 15:32:36
简短回答：是的。
只要首先加载包含该函数的第一个脚本，就可以在任何地方调用该函数，只要它首先加载即可。
<script src="file1.js" type="text/javascript"></script>
<script src="file2.js" type="text/javascript"></script>
在此示例中，确保file1.js包含您的largeFunction()函数。 然后你可以调用largeFunction(); 在file2.js里面。
你也可以这样做：
<script src="file1.js" type="text/javascript"></script>
<script>
largeFunction();
</script>
只需确保您的FIRST脚本包含该功能。
解决方案2
5 2016-02-24 15:46:52
您可以尝试以下选项：
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.
}
的index.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（）
一旦渲染了所有元素，就会触发此事件。 如果您的JS正在操纵任何元素，如管理UI状态或创建像datepickers或searchable dropdowns或adding options to select等控件，则首选这些事件。
注意： 两个事件都不相同。 您可以参考以下帖子 window.onload vs $（document）.ready（）
// Pure JS
function largeFunction(){
}
window.onload = function(){
largeFunction();
}
// jQuery
function largeFunction(){
}
$(document).ready(function(){
largeFunction();
})
注意：拥有大功能不是一个好习惯。 您还应该尝试将功能拆分为多个功能
function getData(callback){
var data = ...
// Gets data from server
data = cleanData(data);
data = processData(data);
if(callback) callback(data); // callback refers to renderUI function
}
function cleanData(data){
// Clean if any field needs formatting
return data;
}
function processData(data){
// You can permute logic to parse data
return data;
}
function renderUI(data){
// Update DOM element with data
}
function largeFunction(){
getData(renderUI);
}
解决方案3
1 2016-02-24 15:32:25
在不详细了解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>
如您所见，您真正需要做的就是确保在当前脚本标记之前引用外部脚本文件。 从那里，您可以调用largeFunction()就像它嵌入HTML一样。
解决方案4
1 2016-02-24 16:25:32
如果您在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>
有条件地从 JavaScript function 调用脚本标签？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.