Question

我想问一下有人可以帮我解决这个疑问：

我有一个外部.js文件，其中包含我在某些网站上使用的所有功能。当然，还有不同的html文档具有不同的内容，我想调用一个函数来更新一些内容（标题和表单中某些选择字段中选定的项目不相同）。

我知道我可以只使用html body标签中的onload事件并调用js文件的不同函数，但我已经读过这不是最好的方法，所以我的问题是：如何调用相同js的不同函数来自不同html文档的文件？

提前谢谢！

Answer 1

的file1.html：

<!doctype html>
<body>
....
<script src=file.js></script>
<script>
// some code
</script>
</body>

file2.html：

<!doctype html>
<body>
....
<script src=file.js></script>
<script>
// different code
</script>
</body>

您还可以检查JavaScript中的位置或DOM，但上面的内容非常简单。

其他方式，在file.js中：

if (location.href == 'something') {
    // do something
} else {
    // do something else
}

或者，使用jQuery：

jQuery(document).ready(function($) {
    if ( $('h1').text() == 'Main Page' ) {
        $('nav').hide();
        $('#welcome').show();
    } else {
        // something ...
    }
});

Answer 2

页面类型1：

<html>
    <body class="one">
    ...Markup...
    </body>
</html>

页面类型2：

<html>
    <body class="two">
    ...Markup...
    </body>
</html>

jQuery的：

$().ready(function()
{
    ...code for all pages...

    if($('body').hasClass('one'))
    {
        ...code for pages of type 1...
    }
    else if($('body').hasClass('two'))
    {
        ...code for pages of type 2...
    }

    ...code for all pages...
});

我远不是一个JavaScript大师，所以我不知道你如何在纯JS中做到这一点。正如rsp所说，您还可以将代码拆分为单独的文件 - 一个用于所有页面中都需要的代码，以及具有页面特定代码的文件，这些文件仅加载到需要它们的页面上。

相同的JS外部文件，不同的html，如何在加载html js时触发不同的功能？

2 个答案: