在科尔多瓦重新加载页面

Reloading page in cordova

本文关键字：加载 新加载      更新时间：2023-09-26

>我对科尔多瓦有一个问题，我不明白如何处理相对于多次打开同一页面的问题。

假设我有两个基本的 html 文件，像这样，支持 cordova 和 jquery 移动：

索引.html

<!DOCTYPE html>
<html>
<head>
    <title>
        ciao
    </title>
    <meta charset="UTF-8">
    <!-- cordova -->
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <!-- jquery mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
    <script src="js/libs/jquery/jquery.js"></script>
    <script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
    <!-- initialization files -->
    <script src="js/mainjs.js"></script>
</head>
<body>
    <section id="index" data-role="page" data-fullscreen="true">
        <div data-role="content">
            /*...*/
            <a href="mappa.html">
                        <img src="img/map.png" />
            </a>
            /*...*/
        </div>
    </section>
</body>
</html>

马帕.html

<!DOCTYPE html>
<html>
<head>
    <title>
        mappa
    </title>
    <meta charset="UTF-8">
    <!-- cordova -->
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <!-- jquery mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
    <script src="js/libs/jquery/jquery.js"></script>
    <script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
</head>
<body>
    <section id="mappa" data-role="page" data-fullscreen="true">
        <div data-role="content">
            /* code*/
        </div>
    </section>
</body>
</html>

现在我需要在 mappa.html 文件中加载数据，所以我使用一个处理程序，我选择在索引中包含的 mainjs.js 文件中加载，如下所示。

$(document).ready(function() {
console.log("deviceready");
$(document).on("pageshow","#mappa",function(){       //pageshow is thrown each time
                /*code*/
            });
});

如果我每次加载页面时使用上面的代码，则所有处理程序都会重新启动，并且在数据下载等长时间操作的情况下，它非常用户不友好。

所以我尝试了这个处理程序 

$(document).one("pageshow","#mappa",function(){ });

但是我第二次输入 mappa.html 页面只是空白的，因为处理程序没有工作 2 次。

那么如何维护页面加载呢？

编辑：在这种特定情况下，我需要加载地图并使用此代码

$(document).on("pageshow","#mappa",function(){       //pageshow is thrown each time
    console.log("dentro script"); 
    //setting div height
    $("#map_canvas").height( $(window).height() - $("div[data-role='header']").height() - 32 );
    //since page show is thrown each time i use a session storage variable
    //so i make the init map only one time
    if( !sessionStorage.mapinit ) {
        console.log("----------mapinit is not set");
        sessionStorage.mapinit=1;
        console.log("----------mapinit=1");
        // Initialize the map plugin
        var mapDiv = document.getElementById("map_canvas");
        var map = plugin.google.maps.Map.getMap(mapDiv);
        map.setMyLocationEnabled(true);
        var pisaCenter = new plugin.google.maps.LatLng(43.723072, 10.396585);
        map.setCenter(pisaCenter);
        map.setZoom(13);
        map.one(plugin.google.maps.event.MAP_READY, onMapInit);
    } else {
        console.log("----------map already set");
        var mapDiv = document.getElementById("map_canvas");
        var map = plugin.google.maps.Map.getMap(mapDiv);
    }  
});

由于 

map.one(plugin.google.maps.event.MAP_READY, onMapInit);

只执行一次 onMapInit 函数。

但在这样的情况下

<body>
<script>
    $.support.cors=true;
    $.mobile.allowCrossDomainPages = true;
    $.getJSON('http://.../prestazioni.php?prestazioni=tutto&callback=?',function(data){
        $.each(data, function(i, dat){
            $("#listview").append('<li>'+dat.rep+'</li>');
        });
        $('#listview').listview('refresh');
    });
</script>
</body>

每次打开页面都需要下载数据是荒谬

的

主要问题与jquery mobile及其加载页面的方式有关。

所以就我而言，我使用多个 html 文件，而 jquery 不会缓存打开的页面;这种行为可以被覆盖，在页面上添加 data-dom-cache="true"，如下所示

<section id="prestazioni" data-role="page" data-fullscreen="true" data-dom-cache="true">

这效果很好。页面保持加载状态，但也可以使用处理程序对其进行修改。

还有一个简单的途径，只需创建具有多个页面的单个html文件即可。 在这种情况下，DOM 始终相同，并且页面全部缓存。

相关文章：