Javascript 在cordova中重新加载页面_Javascript_Jquery_Html_Jquery Mobile_Cordova

Javascript 在cordova中重新加载页面

javascript jquery html jquery-mobile cordova

Javascript 在cordova中重新加载页面,javascript,jquery,html,jquery-mobile,cordova,Javascript,Jquery,Html,Jquery Mobile,Cordova,我和科尔多瓦有一个问题，我不知道如何处理相对同一页的多次打开假设我有两个这样的基本html文件，支持cordova和jquery mobile： index.html <!DOCTYPE html> <html> <head> <title> ciao </title> <meta charset="UTF-8">  &l

我和科尔多瓦有一个问题，我不知道如何处理相对同一页的多次打开

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

index.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>

如果我每次加载页面时都使用上面的代码，那么所有处理程序都会重新启动，在长时间操作（如数据下载）的情况下，这对用户非常不友好

所以我试过这个处理器

$(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>


$.support.cors=true；
$.mobile.allowCrossDomainPages=true；
$.getJSON（'http://.../prestazioni.php?prestazioni=tutto&callback=?，函数（数据）{
$。每个（数据、函数（i、dat）{
$（“#列表视图”）.append（“”+dat.rep+””）；
});
$（'#listview'）。listview（'refresh'）；
});

荒谬的是，我每次打开页面都需要下载数据。主要问题与jquery mobile及其如何加载页面有关

所以在我的例子中，我使用多个html文件，jquery不会缓存打开的页面；在这样的页面上添加数据dom cache=“true”可以覆盖此行为

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

这很有效。页面仍处于加载状态，但也可以使用处理程序对其进行修改

还有一个简单的方法，就是创建一个包含多个页面的html文件。在这种情况下，DOM总是相同的，所有页面都被缓存。

发布您在

pageshow

上运行的代码。您想只加载一次映射吗？我想知道如何才能只加载一次每个页面，而不只是加载映射。

pageshow

在您访问页面时触发，因此如果您只想运行一次代码，使用

pagecreate

事件或

.one（“pageshow”

在显示页面时运行代码一次。

.one

不是

。

上。如果使用pageshow或pagecreate与.one（）处理程序一起使用，则第二次加载页面时页面为空

<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>

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