JQuery Mobile - 后退和前进浏览器按钮触发pageinit事件

时间：2013-06-05 11:02:05

标签： jquery-mobile

在我的网站中，我看到在浏览器的前进按钮选择期间调用了pageinit。它是否正确。这不会两次绑定已注册的事件。

First.html 

<!DOCTYPE HTML>
<html>
    
    <head>
        <title>Test1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="../scripts/common.js"></script>
    </head>
    
    <body>
        <div data-role="page" id="first">
             <h1 style="background: red">Swipe 1</h1>
         <a href="second.html">Click</a>
        </div>
    </body>

</html>

Second.html 

<!DOCTYPE html>
<html>

    <head>
        <title>Test2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="../scripts/common.js"></script>
    </head>

    <body>
        <div data-role="page" id="second">
            <div data-role="header">
                <h1>jQuery Mobile</h1>
            </div>
            <div data-role="content">   
              <a href="third.html">Click</a>
            </div>
            <div data-role="footer">
                <h4>www.jboss.org/developer</h4>
            </div>
        </div>
    </body>

</html>

third.html 

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery Mobile Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="third">
            <div data-role="header">
                    <h1>jQuery Mobile</h1> 
            </div>
            <div data-role="content">
                <ul id="listOfItems" data-role="listview" data-inset="true" data-filter="true">
                    <li><a href="">One</a>
                    </li>
                    <li><a href="">Two</a>
                    </li>
                    <li><a href="">Three</a>
                    </li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>www.jboss.org/developer</h4> 
            </div>
        </div>
    </body>

</html>

common.js 

$(document).on('pageinit', "#first", function (event) {
    console.log("first");
});


$(document).on('pageinit', "#second", function (event) {
    console.log("second");
});


$(document).on('pageinit', "#third", function (event) {
    console.log("third");
});

您可以查看上面的代码并告诉我为什么每次调用pageinit。

2 个答案:

答案 0 :(得分：5)

简介

在我们讨论页面事件之前，我们需要讨论jQuery Mobile页面架构。 jQuery Mobile应用程序可以通过两种不同的方式创建，即多页模板或多个 HTML 页面。

不同的jQuery Mobile页面架构

多页模板

在这种模板中，所有内容都会加载到 DOM 中。无论用户从一个页面转换到另一个页面的次数将保持加载到 DOM 。虽然这是在页面之间平滑过渡的最佳解决方案，但它可能会给 DOM 带来负担。这通常不是桌面浏览器的问题，但移动浏览器可能会受到影响，特别是在低端设备上。

多HTML模板

此模板解决方案需要多个 HTML 页面。它是大型移动应用程序构建的绝佳选择，但有一个问题。与访问每个页面的多页模板不同，它会加载到 DOM 。在较慢的设备上，它可能会导致转换问题，尤其是在目标页面很大的情况下。这可以通过页面预取来解决，其中jQuery Mobile在主页加载并且 pagecreate 事件被触发后在后台加载目标页面。 BUT 还有另一个大问题，这在jQuery Mobile文档中没有充分描述。在页面转换期间，上一页将从 DOM 中删除。这样做是为了防止 DOM 中的内容累积。使用另一个名为

的属性也可以防止这种情况 
data-dom-cache="true"

或初始化全局参数：

$.mobile.page.prototype.options.domCache = true;

页面架构如何影响页面事件

jQuery Mobile有几个页面事件（可以在 HERE 或 HERE 找到更多相关信息）。它们在这里涵盖整页加载/转换过程。高级jQuery Mobile用户知道使用 pageinit 事件而不是jQuery经典 document ready 事件。就像 document ready 一样， pageinit 在页面初始化期间仅触发一次。

但有一个问题， pageinit 只会在 DOM 内的页面初始化期间触发一次。如果页面已从 DOM （在多HTML模板中）中移除并再次加载 pageinit 将再次触发。

简而言之，每个页面 DOM 初始化将触发新的页面事件初始化。如前所述，这可以通过页面兑现来防止。

页面兑现的影响

这对于 jQuery Mobile 开发人员来说几乎是一个禁忌主题，所以让我说一下，没有必要害怕页面兑现。相信我，jQuery Mobile是一个强大的框架，它通常在每个可用平台上都能很好地运行。与jQuery Mobile相关的大量抱怨与其大的DOM大小要求没有直接关系，因此不必担心兑现。

这并不意味着你应该像醉酒的水手那样填补 DOM 。每个应用程序开发都必须提前计划。大多数使用的页面必须永久保留在DOM中。其他所有内容都应该特别使用（在需要时加载/删除）。

答案 1 :(得分：2)

<强>编辑：
似乎在使用多页模板方法（包含所有页面的单个html）时，pageinit会被触发一次，因为页面在DOM中加载并在页面之间转换时保留在那里。

但是，当使用多个页面并通过Ajax导航时，您会注意到页面包含除第一页之外的属性data-external-page="true"。即使您使用domCache false，第一页也始终缓存在DOM中。但是，除了第一页之外的页面在您离开后会加载并清除。这就是为什么pageinit会在后退/前进按钮点击时触发的原因。

domCache 设置是否在用户导航后将页面保留在DOM中。您可以在jQM docs上阅读相关信息。默认情况下， domCache 选项的值为 false 。

添加：

$(document).on('mobileinit', function () {
    $.mobile.page.prototype.options.domCache = true;
});
jQuery js和jQuery Mobile js之间的

将导致页面在DOM中缓存。因此，pageinit不会触发。

另一种方法是在你的主播上添加data-dom-cache="true"。

使用domCache的缺点是DOM可能很大，导致内存问题。在这种方法中，DOM管理留在开发人员身上。

最后确保您在页面中使用相同的jQ，jQM版本。前两页使用jQ 1.9.1，jQm 1.3.1，第三页使用jQ 1.7.1，jQM 1.1.0。这与具体问题无关，但值得一提。

我希望这会有所帮助。

相关问题
最新问题