Jquery mobile：加载前重定向到另一个页面答案

【问题标题】：Jquery mobile: redirect to another page before loadingJquery mobile：加载前重定向到另一个页面
【发布时间】：2012-02-21 22:23:50
【问题描述】：

我正在使用 jquery mobile 1.0

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

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

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

});

-我几乎尝试了每个事件，但没有成功。 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 
});

-我对这个事件不太清楚，也没有找到一个可行的例子。 - 有人可以帮忙吗！

【问题讨论】：

你找到答案了吗..我需要解决方案..提前谢谢..
嗨。实际上，我大约在 1 年前就这样做了。但会搜索并让你知道。
谢谢..如果你找到了请告诉我..再次感谢
我正在从 previosPage.html 重定向到 first.html 或 otherPage.html。所以重定向逻辑现在在 previosPage.html

标签： jquery redirect jquery-mobile

【解决方案1】：

试试这个

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

另外，您可以使用 loadPage

希望对你有帮助:)

【讨论】：

【解决方案2】：

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 页面中的正文标记为空。

【讨论】：

我只能评论我自己的答案atm；但是我在发布我的之前确实尝试了@Endophage 的答案，但是由于某种原因它仍然会在重定向到移动设备之前显示页面，尤其是在首次加载（即没有缓存）和更大的页面大小时。
谢谢回复。只有我想要的是一个事件，其中重定向将触发并且进一步的页面加载将停止。否则，显示/隐藏页面更容易。

【解决方案3】：

您是否尝试过不使用事件。 JS 代码将在遇到时执行，因此确保您的条件代码位于页面顶部（在头部某处）就足够了。

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

【讨论】：

谢谢回复。但它不起作用，此页面在重定向之前闪烁:(
@AvisekChakraborty 嗯，这大概是您对 JS 的期望，所以如果它不起作用，您有 2 个选择。要么接受它已经足够好，要么弄清楚如何做重定向服务器端......

【解决方案4】：

很难说你想要完成什么。与 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 就绪处理程序来测试我们的条件，如果为真，则加载 page2.html 的内容并替换 #page1 页面。请注意，我正在使用带有页面片段语法的$.load 方法。这意味着您必须知道要加载的页面 ID。

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

为了防止在加载过程中显示第一页的内容，我在样式表中添加了以下 CSS：

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

jQuery Mobile 负责显示和隐藏页面，因此默认情况下将它们全部隐藏将确保您不会得到一闪而过的未增强内容。

无论如何，希望这会有所帮助。

【讨论】：

【解决方案5】：

试试这个：

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

【讨论】：

【解决方案6】：

我知道这是旧的，但我花了一些时间试图解决这个问题，所以这可能对某人有用。

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

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

【讨论】：

【解决方案7】：

因为这似乎有很多答案；尤其是当您使用多页模板时..这是一个指向 jquery 移动表单上的答案的链接，该链接通过在页面初始化之前将 # 标记注入 url 来工作

jquery forum answer

在我的情况下不起作用，因为我不希望用户查看井号标签，但这是一个开始.. 稍后会有更多内容

【讨论】：