Javascript 停止显示页面

我想这样做：

$(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
      ...
   }
});

我没有找到任何方法在不显示“myPage”的情况下切换到“example.jsp”页面。有办法吗？我尝试过使用类似于

window.stop（）

和

event.stopPropagation（）

的东西，但它不起作用

---

谢谢大家!

我认为最好的方法是在默认情况下隐藏页面，并且仅在页面通过条件时才显示它。看起来是这样的

CSS:

JS:

测试和工作：

html JSFIDLE

---

在您的情况下，您需要监听事件以通过显示

数据。toPage

并显示另一个

使用and将显示

数据。toPage

，然后跳转到目标页面

注意：会发射两次，这很正常，不要惊慌；）

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

HTML

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

---

你有没有试过把你的javascript放在头上？这样，它将在呈现页面之前加载js然后稍后显示（通过超时或其他方式）。是的，.js文件在头部。#这里显示的是myPage，您只隐藏一个div，并更新urlHistory。

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

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

$(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");
        }
    }
});

// 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 */
});

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

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

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