Question

如何定义多个onload函数（但不同！）在同一个js文件中，

为前，

file.js：

//---on load forpage1
$( document ).ready( handler ){ 
    do something one
}

//---on load for page2
$( document ).ready( handler ){ 
    do something else
}

并在两个页面中导入它：例如：

1页：

<!DOCTYPE>
<html>
<head>
     <script type="text/javascript" src="file.js"></script>
</head>

第2页：

<!DOCTYPE>
<html>
<head>
     <script type="text/javascript" src="file.js"></script>
</head>

Answer 1

我假设你问这个，因为你想在另一页上执行不同的代码。

例如，您可以检查location.href以查看当前正在调用的页面。

更常见的是使用服务器端脚本来确定当前页面并相应地引用javascript。

编辑示例：

$(function () {
    var page = window.location.pathname;

    if (page == "/index.html") {
        // code here
    }
    else if (page == "/contact.html") {
        // other code here
    }
});

Answer 2

这取决于你想要实现的目标。如果您希望在页面加载时运行多个函数，那么帖子中的代码几乎是正确的：

$(document).ready(function() { 
    console.log("Function 1 running");
});
$(document).ready(function() { 
    console.log("Function 2 running");
}

您也可以根据需要预先定义这些功能，并将其传递给$(document).ready()来电：

function handler_1() { 
    console.log("Handler_1 is running");
}

function handler_2() {
    console.log("Handler_2 is running");
}

$(document).ready(handler_1);
$(document).ready(handler_2);

您甚至可以使用jQuery快捷方式$()：

$(handler_1);
$(handler_2);

但是如果你只想在页面加载时运行一个函数 - 取决于加载的页面 - 你需要采取另一种方法。您可以在script.js中定义所有代码，并从第1页开始加载init_page1.js，从第2页开始加载init_page2.js等。这些init文件会调用适合的任何设置函数这页纸。

或者，您可以在正文标记上添加data属性，指明它所在的页面，并让$(document).ready()调用正确的处理程序。像这样：

$(document).ready(function() { 
    var page_type = $('body').data('page-type');
    if (page_type == 'home') { 
        handler_1();
    } else if (page_type == 'profile') { 
        handler_2();
    }
});

然后，在您的HTML文件中：

<body data-page-type="profile">

可能最好的解决方案是让回调函数确定它们是否与页面相关。这样你就可以在任何你喜欢的地方重复使用它们。所以你的脚本会看起来像这样：

function handler_1() { // Only for home page
    if ($('body').data('page-type') != 'home') {
        return;
    }
    console.log("I'm the handler_1 function");
}

function handler_2() { // Only for profile page
    if ($('body').data('page-type') != 'profile') { 
        return;
    }
}

$(handler_1);
$(handler_2);

但是，真的，如果你可以避免将其编码到JavaScript中，那么你应该这样做。最好只包含您知道该特定页面运行所需的脚本。

Answer 3

除了$（document）.ready之外，它是在为当前HTML文件（包括所有图像）完全加载DOM之后调用的，$（window）.load是另一种检测未被触发的DOM就绪的方法直到所有子元素，如iframe已加载并可供使用。

关于您的原始问题，您可以根据需要定义尽可能多的$（document）.ready函数;它们按照找到的顺序执行。

Answer 4

您可以拥有多个$(document).ready块 - 但它不会解决您的问题，因为一旦加载了DOM，它们都会被调用。

我建议你去看看Paul Irish的DOM-based Routing。

Answer 5

您的问题非常模糊，但我假设您希望在加载页面时调用多个项目，其中第一个示例是。

document.ready(function(handler){
    /*Do thing one*/
    /*Do thing two*/
});

但是如果你的意思是用不同的场景调用它们，你就可以使用传入的处理程序来检查文档的状态并调用另一个项目。

document.ready(function(handler){
    if(handler==bar)
        //Do thing one
    else if(handler==foo)
        //Do thing two
    else
        //Do thing three
});

在同一个js文件中定义多个onLoad

5 个答案: