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

时间:2017-07-31 13:38:33

标签: javascript jquery html

是否可以从HTML正文中调用.js文件中声明的函数。我假设它失败的原因是因为在HTML正文中调用函数后调用了.js文件。有没有办法解决这个问题。

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

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()提供的函数。

我得到的控制台错误是&#34; returnedMessage()未定义&#34;。

$(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'); 


});

3 个答案:

答案 0 :(得分:2)

您可以编写自己的函数:

在这里您可以看到简单的示例: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>          

答案 1 :(得分:2)

编辑:

你应该像这样定义你的功能:

public SplashEnvironment(Context context, Activity act) {
    super(context);
    getHolder().addCallback(this);
    this.act = act;

    InputStream is = context.getResources().openRawResource(+ R.drawable.resized);
    mMovie = Movie.decodeStream(is);
    System.out.println(mMovie.width() + "x" + mMovie.height());
    System.out.println(getWidth() + "x" + getHeight());
}

public void draw(Canvas canvas) {
    if(canvas != null) {
        super.draw(canvas);
        Paint p = new Paint();
        p.setAntiAlias(true);

        long now = android.os.SystemClock.uptimeMillis();
        if(mMovieStart == 0)
            mMovieStart = now;
        if(mMovie != null) {
            int dur = mMovie.duration();
            if(dur == 0)
                dur = 3000;
            int relTime = (int)((now - mMovieStart) % dur);
            mMovie.setTime(relTime);
            mMovie.draw(canvas, 0, 0);
            act.runOnUiThread(new Runnable() {
                public void run() {
                    invalidate();
                }
            });
        }
    }
}

或者像这样

var someFunction = function() {

   // do something

}

但始终使用function someFunction() { // do something } 字词。有关function definition in Javascript的更多信息。

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

在HTML文件中的function标记之间插入Javascript代码

<script>

您通常会将这些脚本标记放在<script> console.log("Hello World!"); </script> 标记内。不过,建议您将放在 <head>之后。这样您就可以在运行JS脚本之前加载DOM。当您想要在DOM中选择元素时,这对于例子很重要。如果你把JS代码放在创建这个元素的实际HTML之前,那么JS将找不到你想要的元素,因为它还不存在。

现在使用HTML代码中的脚本效率不高,因此在<body>文件中编写JS然后将其导入HTML文件中会有所帮助。 CSS文件。使用.js执行此操作:

<script>

您可以使用多个<script src="myScript.js"></script> 标记来提取多个JS文件。但是你需要注意你编写它们的顺序。例如,您有一个<script>文件,其中包含您的所有功能,以及一个functions.js来处理您应用程序上的菜单。您正在使用menu.js中代码functions.js中的功能,因此您需要按此顺序导入文件:

menu.js

首先声明,首先加载。

答案 2 :(得分:1)

也许你想把文件上的功能准备好,所以你必须写:

targz: {
            standalone_win: {
                files: {
                    "./target/dir":  "./target/dir.tgz"
                }
            }
        }