Question

我是来自意大利的网络devoper ...我有一个加载href的问题例：我有一个带有此代码的one.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>dkrMobile</title>
    <!--caricamento librerie-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
    <div data-role="content">
        <div style=" text-align:center">
            <img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
        </div>
        <form action="#pageFile">
            <div data-role="fieldcontain">
                <label for="userNameLogin">
                    Username
                </label>
                <input name="" id="userNameLogin" placeholder="" value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <label for="passwordLogin">
                    Password
                </label>
                <input name="" id="passwordLogin" placeholder="" value="" type="password">
            </div>

            <a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
                Login
            </a>

        </form>
    </div>
</div>
</body>
</html>

和带有此代码的two.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>dkrMobile</title>
    <!--caricamento librerie-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
    <script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />

    <!--css userinterface-->
    <link rel="stylesheet" href="css/ui.css" />




</head>
<body>

<div data-role="page" id="loadingPage">
    <div data-role="content">
    <h1>caricamento di tutti i contenuti in corso</h1>
    <a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
    </div>
</div>

<div data-role="page" id="pageFile">
    <div data-role="content">
    <h1>dueeee</h1>

    </div>
</div>

<!-- FILE-->

</body>
</html>

现在如果点击登录 - 将不会加载two.html。

想要一个演示？ here the demo

如果我在two.html中单击skip，则不显示任何内容（如果我刷新页面，则开始工作）。

唯一的方法是data-ajax =“false”？为什么呢？

Answer 1

这不是错误。要理解这个问题，您必须了解jQuery Mobile的工作原理。

多 HTML 模板不能与多页模板混合使用。例如，在使用多个 HTML 页面时，只有第一个页面可以包含多个页面。当jQuery Mobile加载其他 HTML 文件时，它将删除HEAD（我们不需要它，因为第一个 HTML HEAD内容已经加载到DOM中）它只会加载它可以在文件中找到的第一页，每隔一页都会被丢弃。

data-prefetch 对您没有帮助。您也正在初始化错误，数据预取属性没有值，只是 data-prefetch ，例如：

<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>

如果您想了解更多jQuery Mobile如何处理多个HTML和多个页面模板，或者他们需要了解这些 ARTICLE 或 THIS 一个。为了透明，他们是我个人的博客文章。你可以在那里找到你需要知道的一切。

基本上解决您的问题的方法是将所有网页放在一个 HTML 文件中，或者您应该将two.html分成两个单独的 HTML < / strong>文件。你决定什么是最适合你的解决方案。

Jquery mobile href链接不加载新页面

1 个答案: