mobile.changepage 外部 HTML 文件需要页面刷新

Question

我已经为这个问题寻找了很多天的解决方案。第一个启动页面有超时持续时间，然后它加载带有链接列表的主页。链接正在显示，但图标（awesome-icons）没有加载，我在每个 li 上设置的过渡也没有加载。加载页面后，如果我刷新它，所有具有过渡效果的内容都可以正常工作。我正在使用 animate.css 来制作列表动画。

有人能解决这个问题吗？

启动页面代码

<!DOCTYPE html>
<html>
    <head>
    <title>Splash</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="_assets/css/jqm-demos.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/myapp.css">
    <link rel="shortcut icon" href="favicon.ico">
    <script src="js/jquery.js"></script>
    <script src="_assets/js/index.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script>
      $(document).on('pageinit','#splash',function(){ 
      // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
        setTimeout(function(){
            //$.mobile.pageContainer.pagecontainer("change", "home.html", {transition: "animated fadeOut"});
            $.mobile.changePage("home.html", "animated fadeOut");
        }, 4000);
    });
    </script>
    </head>
    <body>
    <div data-role="page" id="splash">
        <div data-role="content">
            <img src="images/uos_logo.svg" alt="startup image" style="width: 100%; height: 100%" />
        </div>
    </div>


<!-- /page -->

</body>
</html>

主页代码

<!DOCTYPE html>
<html>
    <head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="_assets/css/jqm-demos.css">
    <link rel="stylesheet" href="css/myapp.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="shortcut icon" href="favicon.ico">
    <script src="js/jquery.js"></script>
    <script src="_assets/js/index.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>

    <div data-role="page" id="home">        
        <div data-role="content">
            <ul id="myTabs" class="animated slideInUp">
                <li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 1</a></li>
                <li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 2</a></li>
                <li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 3</a></li>
                <li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 4</a></li>
                <li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 5</a></li>
                <li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 6</a></li>
                <li class="clr7"><a href="#"><i class="fa fa-angle-right"></i> 7</a></li>
                <li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 8</a></li>
                <li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 9</a></li>
                <li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 10</a></li>
                <li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 11</a></li>
                <li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 12</a></li>
                <li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 13</a></li>
                <li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 14</a></li>
                <li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 15</a></li>
                <li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 16</a></li>
            </ul>
        </div>
    </div>
<!-- /page -->


<script type="text/javascript">
    $('ul#myTabs li').each(function(i){
    var t = $(this);
    setTimeout(function(){ t.addClass('animated slideInUp'); }, (i+1) * 120);
    });
</script>

</body>
</html>

Answer 1

默认情况下，jQM 通过 AJAX 将页面加载到当前 DOM，并且仅获取数据角色="page" 的第一个 DIV。所以第二页中的任何scripts/css都没有加载。

由于您打算用第一页完全替换启动画面，因此您可以只使用

location.assign("home.html");

如果您真的想要漂亮的过渡，只需将初始页面作为单独的数据角色包含在第一页中即可="page" div，或者将来自主页的所有脚本包含在数据中-role="page" div 所以他们被加载到 dom.

mobile.changepage 外部 HTML 文件需要页面刷新

on mobile.changepage external HTML file requiring page refresh

html

refresh

external

jquery-mobile