javascript - 停止显示页面

Question

我想做这样的事情：

$(document).on("pagebeforeshow", "#myPage", function(event){ 
  if(condition){
    //I need to do something here to stop loading "myPage"
    ???
    $.mobile.changePage("example.jsp");
   }
   else {
     //continue showing actual page normally
      ...
   }
});

我没有找到任何方法可以更改为“example.jsp”页面而不显示“myPage”一秒钟。有没有办法做到这一点？我尝试使用类似的东西window.stop()，event.stopPropagation()但它不起作用。

谢谢！

Answer 1

在您的情况下，您需要收听pagebeforechange事件以通过显示data.toPage并显示另一个。

使用pagebeforehideandpagebeforeshow将导致显示data.toPage然后跳转到目标页面。

演示

// for demo purposes
var condition = 0;

// triggers when leaving any page
$(document).on("pagebeforechange", function (e, data) {

  // id of page that you want to skip if condition is true/false, it's up to you
  var to_page = data.toPage[0].id;

  // skip showing #myPage if condition is true
  if (to_page == "myPage" && condition == 0) {

    // true! go to p3 instead
    $.mobile.changePage("#p3", {
        transition: "flip"
    });

    /* prevent updating URL history and allow new transition if you want.
       Without this, #myPage will be pushed into $.mobile.urlHistory
       and any new transition (animation) will be neglected */        
    e.preventDefault();
  }
  /* in the demo, if you change condition value, #p2 will be shown
     when condition returns "false". #myPage will be shown normally */
});

注意： pagebeforechange会触发两次，这是正常的，不要惊慌；）

Answer 2

测试和工作：

html

<div data-role="page" id="index">
    <div data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a data-role="button" href="#second">To second page</a>
    </div>
</div>
<div data-role="page" id="second">
    <div data-role="header">
        <h1>Second page</h1>
    </div>

    <div data-role="content">

    </div>
</div>   
<div data-role="page" id="third">
    <div data-role="header">
        <h1>Third page</h1>
    </div>

    <div data-role="content">

    </div>
</div>            

jQuery

$(document).on('pagebeforechange', function(e, data){  
    var to = data.toPage;
    var from = data.options.fromPage;

    if (typeof to  === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#index' && to === '#second') {
            e.preventDefault();
            e.stopPropagation();            
            $.mobile.changePage( "#third");
        }
    }
});

jsfiddle

http://jsfiddle.net/tronc/GPUay/3/

Answer 3

我认为最好的方法是默认隐藏页面，并且只有在它通过条件时才显示它。所以它看起来像这样

CSS：

#myPage {
  display: none;
}

JS：

$(document).on("pagebeforeshow", "#myPage", function(){ 
  if(condition){
    $.mobile.changePage("example.jsp");
  } else {
    $('#myPage').show()
  }
});

Answer 4

我知道如果我使用“pagebeforechange”事件它工作正常，但我需要在加载另一个页面时这样做（但未显示）。我找到了一个解决方案，添加一个新的 DIV 元素作为页面 DIV 子元素，隐藏并显示它：

HTML

<div id="target1Page" data-role="page">
   <div id="contentTarget1">
   ...
   </div>
</div>

JS

$(document).on("pagebeforeshow", "#myPage", function(){
   $("#contentTarget1").hide();

   if(condition){
      $.mobile.changePage("#target2Page");
   } else {
      $('#contentTarget1').show();
      ...
   }
});