logo标签列表

jQuery Mobile 获取当前页面

javascriptcordovajquery-mobile
21

我正在使用 jQuery Mobile 1.1.1 和 Apache Cordova 2.0.0。我希望当按下返回按钮时，我的应用程序退出，但仅在当前页面的 ID = feedZive 时才执行此操作。我正在使用以下代码来实现：

function onDeviceReady(){
    document.addEventListener("backbutton", onBackKeyDown, false);
    function onBackKeyDown(){
        if ($.mobile.activePage.is("#feedZive")){
            navigator.app.exitApp();
        }
        else{
            navigator.app.backHistory();
        }

    }
};

不过看起来我无法获取当前页面，因为我已经尝试过以下代码：

var activePage = $.mobile.activePage;
alert(activePage);

我的警告显示未定义。我也尝试将$.mobile.activePage更改为$.mobile.activePage.attr("id")，但它没有起作用。

我的警告显示为未定义。我尝试将$.mobile.activePage更改为$.mobile.activePage.attr("id")，但没有生效。

8个回答
46
我在jqm网站上没有找到activepage的文档...我在这里搜索了它：http://api.jquerymobile.com/?s=activepage - dsdsdsdsd
我用 JQM 的 1.3.0 版本写了一个例子 http://jsfiddle.net/howbizarre/hHxjk/，但奇怪的是，它在 JQ 1.9 及其之后的版本中无法工作... - howbizarre
1
对于 jqm 1.4.5 和 jquery 2.01.3，请将“.live”替换为“.on”。 - Umer Qureshi
如果你在 $(document).bind('pageinit', function(e, data){}) 中，可以使用 e.target.id。 - Connor Leech
确实很奇怪，或者可能是我对SO的理解有误，但如果我直接从S.O.复制答案到我的编辑器中，JS控制台会报错："SyntaxError: illegal character"。然而，手动输入却可以正常工作！（当然要考虑到Phill Healey在2015年1月22日10:26的回答） - Ideogram
显示剩余2条评论
18
我仍然得到了我在第二个答案中提到的错误。TypeError: $.mobile.activePage未定义 [中断此错误]var activePage = $.mobile.activePage.attr("id");您可以在第二个回答中查看我的整个代码。 - horin
嗯，这很奇怪，因为如果我删除所有脚本并粘贴<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>，那么它就可以工作了，至少在jsfiddle上。 - horin
有没有一种方法可以获取所有页面的列表？我想将URL搜索参数与合法页面的列表进行比较...例如：www.myjqmsite.com?page=fatmomma ...然后我可以if ( $.mobile.someKindOfPageList[ "fatmomma " ] ){ ... } - dsdsdsdsd
11

我意识到这是一个旧串，所以这可能是最近的补充。

你尝试过吗：

var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if(activepage[0].id == yourpageid)
{ /*do something here*/ }

或者另一种方法：

var activePage = $.mobile.activePage.attr('id')
if(activepage == yourpageid)
{ /*do something here*/ }
6

尝试这个方法，对我来说可行：

var activePage = $.mobile.activePage[0].id;

这里有一个带有警告功能的Fiddle：http://jsfiddle.net/9XThY/3/

尝试使用你的代码，并在代码的第二行加入alert(activePage)。但是我根本没有收到任何提示。 - horin
你有尝试过调试这段代码吗？如果你没有收到任何警告，那是因为代码在第一行就出错了。 - mornaner
调试后我得到了以下错误： TypeError: $.mobile.activePage未定义 [在此错误处中断]var activePage = $.mobile.activePage[0].id; - horin
嗯，很奇怪，我多次尝试都可以运行，你能否发布一个Fiddle或者至少一些HTML标记？ - mornaner
这是一个fiddle http://jsfiddle.net/4mCRw/，每个脚本都在我的电脑上，所以如果你想要jquery工作，你需要改变路径。此外，javascript代码位于main.js中。 - horin
3
$(document).ready(function() {

//exit when back button pressed on home screen
document.addEventListener("deviceready", function() {
    document.addEventListener("backbutton", function() {
        if ($.mobile.activePage.attr('id') == "home") {
            navigator.app.exitApp();
        } else {
            navigator.app.backHistory();
        }
    }, false);
}, false);

});

2
我们正在做这件事：
$(document).on("pagecontainershow", function() {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");

    var activePageId = activePage[0].id;

    if(activePageId != 'splashPage') { //fix rotation splash flash bug
        $("#splashPage").hide();
    } else {
        $("#splashPage").show();
    }

    switch(activePageId) {
        case 'loginPage':
            loginPageShow();
            break;
        case 'notificationPage':
            notificationPageShow();
            break;
        case 'postPage':
            postPageShow();
            break;
        case 'profilePage':
            profilePageShow();
            break;
        case 'splashPage':
            splashPageShow();
            break;
        case 'timelinePage':
            timelinePageShow();
            break;
        default:
            break;
    }
});

导航功能的使用方法如下：

    $.mobile.loading('hide');
    $(":mobile-pagecontainer").pagecontainer("change", "#timelinePage", {
        transition: 'none'
    });
单独看起来有些繁琐，但是假设你将每个页面的逻辑放在一个函数内，那么这实际上是整理代码的好方法。我真的需要对我的基于JQM的应用程序进行一些清理，而这种方法实际上会非常有效。 - Phill Healey
@PhillHealey 技术上，每个页面的方法应该在它们自己的函数内部，以便它们有自己的作用域，这些方法调用本质上是 __page.onShow()，但我当时并不真正了解Javascript，所以这些方法是全局的，但是，是的，通过适当的作用域限制，它可以工作。然而，对我来说，这有点奇怪，之前的JQM迭代似乎没有那么直接（switch-case有点极端，但似乎是唯一的方法）。公平地说，由于iOS上发生的所有魔法错误，如滚动中断，现在我会像瘟疫一样避免使用JQM。 - EpicPandaForce
真的，但是当与填补空缺的其他框架一起使用时，JQM可以成为一个非常好的基础。 - Phill Healey
1
Jquery mobile 1.4.3 友好…
$(document).on('pagebeforeshow', function () {
    var URL = $.mobile.path.parseUrl(window.location).toString().toLowerCase();

    alert(URL);
});
当使用AJAX加载内容时，这个会起作用吗？ - Phill Healey
-2

这两种解决方案都不错，但我需要将它放在document.ready(function()中。

$(document).ready(function(){
var activePage = $.mobile.activePage[0].id;
alert(activePage);
});
4
接受的答案是错误的，因为你需要绑定的事件是pageinit事件。那是移动设备上等同于“文档准备就绪”的事件！请参阅相关文档。然后你可能需要使用pageshow事件或其他事件，因为仅使用pageinit可能会太早触发。 - Richard
1
一个更加干净和正确的做法：https://dev59.com/XGcs5IYBdhLWcg3w8obK#23251934 - Phill Healey
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接