问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

从 html 调用 .js 文件中的函数？

社区维基
1
新手上路，请多包涵

是否可以从 HTML 正文中调用在 .js 文件中声明的函数。我假设它不起作用的原因是因为 .js 文件在 HTML 正文中调用函数后被调用。有没有解决的办法。

我在这里看过一些答案，但似乎找不到我要找的东西。我很抱歉，如果它盯着我作为初学者，我可能没有使用正确的术语。

 jqueryfunctions.js:

function someFunction() {
    // do.something;
}

index.html:

<html>
    <head>
     <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
    <script src="jqueryfunctions.js"></script>
    </head>
    <body>
        <script>
            someFunction();
        </script>
    </body>
</html>

这是完整/实际的 .js 文件 returnedMessage() 是我引用的函数 someFunction() 。

我得到的控制台错误是“ returnedMessage() 未定义”。

 $(function(){
    var timer = null;
    function appendmessageBox() {
        $('body').append('<div id="messageBox" class="datamessagebox"> </div> ');
    }
    // just before body tag.
    appendmessageBox();

    // makes MessageBox Disappear on MouseOver
    $('#messageBox').on('mouseover click', function(){
        $(this).fadeOut(300);
    });

    function returnedMessage(message) {
        if (timer) {
            clearTimeout(timer); //cancel the previous timer.
            timer = null;
        }
        $( '#messageBox' ).css('display', 'inline-block');
        timer = setTimeout(function(){
            $( '#messageBox' ).fadeOut( 499 );
        }, 5000);
        $( '#messageBox' ).append('<msg>'+message+'<br /></msg>').fadeIn( 200 );
        $( '#messageBox > msg:last-of-type' ).delay(3000).fadeOut( 3000 );
        setTimeout(function(){
            $( '#messageBox > msg:first-of-type' ).remove();
        }, 5999);
    }

            // This test message bellow works correctly.
            returnedMessage('hello world - test 1');

});

原文由 denski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtml
阅读 461
2 个回答
得票最新
社区维基
1
✓ 已被采纳

编辑：

你应该像这样定义你的函数：

 var someFunction = function() {

   // do something

}

或者像这样

function someFunction() {

   // do something

}

但始终使用 function 这个词。有关 Javascript 中函数定义的 更多信息。

有关 JS 文件导入的更多信息

在 HTML 文件中的 <script> 标签之间插入 Javascript 代码

<script>
  console.log("Hello World!");
</script>

您通常将这些脚本标签放在 <head> 标签内。但是，建议您将它们放在 <body> 之后。这样您就可以在运行 JS 脚本之前加载 DOM。例如，当您想在 DOM 中选择元素时，这很重要。如果您将 JS 代码放在创建此元素的实际 HTML 之前，则 JS 将找不到您要查找的元素，因为它尚不存在。

现在在 HTML 代码中使用脚本并不是很有效，所以在 .js 文件中编写 JS，然后将它们导入到 HTML 文件中，就像导入 CSS 文件一样。使用 <script> 这样做：

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

您可以使用多个 <script> 标签来拉入多个 JS 文件。但是您需要注意编写它们的顺序。例如，您有一个 functions.js 包含所有功能的文件，以及一个 menu.js 处理应用程序菜单的文件。您正在使用代码中的函数 functions.js 在 menu.js 中，因此您需要按以下顺序导入文件：

 <script src="functions.js"></script>
<script src="menu.js"></script>

先声明，先加载。

原文由 Ivan 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

您可以像这样编写自己的函数：

在这里你可以看到简单的例子： https ://jsbin.com/munowupipo/edit?html,output

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Define a Function in jQuery</title>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $.fn.myFunction = function() {
        alert('You have successfully defined the function!');
    }
    $(".call-btn").click(function(){
        $.fn.myFunction();
    });
});
</script>
</head>
<body>
    <button type="button" class="call-btn">Click Me</button>
</body>
</html>

原文由 Chandra Kumar 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题