javascript文件可以调用主html文件中定义的函数吗?

时间:2016-06-01 16:10:31

标签: javascript jquery html

我似乎无法让这个工作。我在其中包含一个带有函数的javascript文件,但是我希望在主HTML文件中定义文件中的一个函数,而不是javascript文件。但这不起作用。

这就是我想要的:

//testFile.js
$(function() {
   $(window).scroll(function() {
    var Scroll = $(window).scrollTop();
    var Width = $(window).width();
    var Height = $(window).height();
    var Offset;

    doParallax();
});

function Parallax(Obj, /*OffX, OffY,*/ ModifierX, ModifierY, Wait) {
    var ScrollT = $(window).scrollTop();
    var ScrollL = $(window).scrollLeft();
    var OffsetY = ScrollT - $(Obj).data("InitialTopOffset");
    var OffsetX = ScrollL - $(Obj).data("InitialLeftOffset");
    var SpeedX = OffsetX*ModifierX + XOff;
    var SpeedY = OffsetY*ModifierY + YOff;

    if (Wait) {
        if (ScrollT >= $(Obj).data("InitialTopOffset")) {
            $(Obj).stop(true, false).css( "background-position",  (ScrollL+SpeedX) + "px " + (-OffsetY-SpeedY) + "px", 50, "linear");
        }
    }
    else {
        $(Obj).stop(true, false).css( "background-position",  (ScrollL+SpeedX) + "px " + (-OffsetY-SpeedY) + "px", 50, "linear");
    }
}
});

//

//main HTML file
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function doParallax() {
   XOff = ( $(window).width() - ( $(window).width()*0.9 ) ) / 2;
   Parallax(".parallax3", 0, -0.55, true);
}
</script>
<script src="testFile.js"></script>
</head>
<body>
...
</body>
</html>

我无法通过Google搜索或在Stack Exchange上搜索找到任何内容。但假设它不起作用意味着我不能这样做,但有没有办法达到预期的效果?

编辑:实际代码示例

1 个答案:

答案 0 :(得分:1)

这是无效的:

<script src="testFile.js">
function somethingElse() {
   alert("Called");
}
</script>

script标记引用脚本 包含脚本。不是都。将它们分成自己的标签:

<script src="testFile.js"></script>
<script>
function somethingElse() {
   alert("Called");
}
</script>

(当然,这忽略了这样一个事实,即人为的例子永远不会调用 doSomething(),但我认为这只是示例中的疏忽。)

另请注意,根据您调用此功能的时间,可能存在范围问题。如果在doSomething()范围之前调用somethingElse(),则可能会出现问题。您可以通过以下方式定义它来将其提升到当前范围的顶部:

var somethingElse = function() {
    alert("Called");
}

不确定这是否是一个问题,因为问题中的代码实际上并没有调用任何函数。

修改:由于问题已经彻底改变......

在上面的评论中,您提到了问题:

  

控制台实际上现在说没有定义Parallax()。

这是因为该函数仅存在于document.ready处理程序中使用的函数范围内。简化:

$(function () {
    // anything created here only exists here
});

// so you can't call it here

如果您需要在该范围之外调用函数,请在该范围之外定义它们:

$(function () {
    // perform document ready handler actions here
});

var Parallax = function() {
    //...
}

var doParallax = function() {
    //...
}