Jquery mobile:加载前重定向到另一个页面

时间:2012-02-21 22:23:51

标签: jquery redirect jquery-mobile

我正在使用jquery mobile 1.0

我想从 first.html 重定向到 otherPage.html ,而不显示的内容 first.html

$("#pageId").live("pagebeforecreate", function(event) {                 

  window.location.href = "otherPage.html";              

});

-i几乎尝试了所有活动,但没有成功。 first.html 会暂时显示。

然后,我尝试了'pagebeforeload'事件,但它没有被触发

$( document ).bind( "pagebeforeload", function( e, data ){ 

        console.log("pagebeforeload starting"); // NO LOGGING HAPPENING 
        window.location.href = "otherPage.html";

        e.preventDefault(); 

        data.deferred.resolve( data.absUrl, data.options, response.page); 

}); 

$( document ).bind( "pageload", function( e, data ){
    console.log("Page successfully loaded into DOM..."); // NO LOGGING HAPPENING 
});

-am对这个事件不太清楚&没找到一个可行的例子。 - 任何人都可以帮忙!

7 个答案:

答案 0 :(得分:12)


试试这个

$("#firstPageId").live("pagecreate",function(){
         $.mobile.changePage("otherPage.html");
});

此外,您可以使用 loadPage

希望有所帮助:)

答案 1 :(得分:4)

只有在加载外部页面时才会触发pagebeforeload事件:

  

每当外部页面加载到应用程序DOM中时,就会触发2个事件。第一个是pagebeforeload。第二个事件将是pageload或pageloadfailed。

解决这个问题的唯一方法是异步加载 first.html 的页面内容,这不是理想的,因为您最终会为同一页面发出2个http请求。但是,如果需要,您只能调用 first-contents.html ,否则您可以重定向到 otherPage.html 而不显示任何内容。例如:

<script>
    someCondition=true;
    if(someCondition) {
        window.location.href = "otherPage.html"; 
    } else {
        $(document).ready(function() {
            $('body').load('first-content.html', function() {
                //other stuff after the contents have loaded: like the rest of your jquery relating to first.html
            });
        });
    }
</script>

确保 first.html 页面中的正文标记为空。

答案 2 :(得分:1)

您是否尝试过不使用活动。 JS代码将在遇到时执行,因此确保您的条件代码位于页面顶部(位于某个位置)应该足够了。

<html>
<head>
<script>
  if (condition)
  {
    window.location.href = "otherPage.html";
  }
</script>
<!-- rest of page -->

答案 3 :(得分:1)

很难说出你想要完成的事情。与Endophage状态一样,如果你想做的就是去另一个页面,你可以做一个简单的JavaScript重定向。

我假设您希望能够选择是显示第一页还是第二页的内容,但仍然保留在第一页。

您可以添加以下代码。请确保在之前添加包含jquery.mobile。

<script>
    $(document).bind('mobileinit', function () {
        // disable autoInitialize
        $.mobile.autoInitializePage = false;
    });
    $(function () {
        var displaySecondPage = true;
        if (displaySecondPage) {
            // load page2.html and replace #page1 with contents of #page2 on page2.html
            $('#page1').replaceWith($('<div />').load('page2.html #page2', function() {
                // continue initialize
                $.mobile.initializePage();
            }));
        }
        else {
            // continue initialize
            $.mobile.initializePage();                
        }
    });
</script>

基本上我们绑定到mobileinit,因此我们可以停用autoInitialize。这使我们可以更好地控制何时显示第一页。

现在我们可以使用标准的jQuery ready处理程序来测试我们的条件,如果为true,则加载page2.html的内容并替换#page1页面。请注意,我正在使用$.load方法和页面片段语法。这意味着您必须知道要加载的页面ID。

加载页面后,您可以调用$.mobile.initializePage以允许jquery mobile呈现新页面。

为了防止在此加载期间显示第一页的内容,我在样式表中添加了以下CSS:

div[data-role='page'] {
  display: none;
}

jQuery Mobile负责显示和隐藏页面,因此默认情况下将它们全部隐藏起来将确保您不会获得一些未增强的内容。

无论如何,希望这有帮助。

答案 4 :(得分:1)

尝试使用:

<head> 
    <script>
        window.location.replace('otherPage.html');
    </script> 
</head>

答案 5 :(得分:0)

我知道这已经过时了,但我花了一些时间试图解决这个问题,所以这可能对某些人有用。

现在,使用jquery mobile 1.3,您只需将data-url设置为目标页面上的<div data-role="page" data-url="...">即可。 JQM将检测到并相应地更新URL。

在此处查看更多http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html

甚至还有一些演示http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/redirect/index.html

答案 6 :(得分:0)

因为看起来对此有很好的答案;特别是当您使用多页模板时..这里是jquery移动表单上的答案的链接,它通过在页面init之前将#标记注入URL来实现工作

jquery forum answer

在我的情况下不起作用,因为我不希望用户查看散列标记,但它是一个开始..稍后会再介绍