javascript - 从 JQM 中的页面调用函数

Question

我在 JQ Mobile 中有一个带有 div 的 HTML 页面。
如何仅当用户位于我定义的页面中时才调用 JS 函数？
例如:

<!-- update page -->
<div data-role="page" id="update">

    <div data-role="header">
    </div>

    <div data-role="main" class="ui-content">
        <script type="text/javascript">
            ShowUsers();
        </script>
    </div>

        <div data-role="footer">
            <h1>© SpicyCanada 2016</h1>
        </div>

</div>

<!-- menu manager page -->
<div data-role="page" id="menuManager">

    <div data-role="header">
    </div>

    <div data-role="main" class="ui-content">
        <script type="text/javascript">
            ShowMenu();
        </script>
    </div>

    <div data-role="footer">
    </div>

</div>

如果我想仅当用户在“更新”页面时调用“ShowUsers”，并且仅当用户在“菜单管理器”页面时调用“ShowMenu”，我该怎么做？

Answer 1

两步:

1) 首先，通过以下方式识别正确的 div:

var $page = document.querySelector('div[data-role="page"]');

2) 然后，检查div的id是否为menuManager:

if ($page.id === 'menuManager') {

[... CONDITIONAL CODE HERE...]

}