jQueryMobile 中的程序化（相对于基于链接的）导航

Question

这个问题已经讨论过好几次了，但我还没有看到一个具体的答案。

类似/相同的问题：SO question

假设我有index.html:

    <div id="index1" data-role="page">
            <div data-role="header"><h1>Index 1</h1></div>
            <div data-role="content"></div>
            <div data-role="footer">
                <a data-role="button" id="toshop2">
                    To Shop 2
                </a>
            </div>
        </div>

和shop.html:

<div id="shop1" data-role="page">
        <div data-role="header"><h1>Shop 1</h1></div>
        <div data-role="content"></div>
        <div data-role="footer">
            <a data-role="button" href="#shop2">To Shop 2</a>
            <a data-role="button" href="index.html" rel="external">
                To Index
            </a>
        </div>
    </div>
    <div id="shop2" data-role="page">
        <div data-role="header"><h1>Shop 2</h1></div>
        <div data-role="content"></div>
        <div data-role="footer">
            <a data-role="button" href="#shop1">To Shop 1</a>
            <a data-role="button" href="index.html" rel="external">
                To Index
            </a>
        </div>
    </div>

我想做类似的事情：

$('#toshop2').on('click', function() {
    $.mobile.changePage("shop.html#shop2");
});

我们现在都知道，这是行不通的。它会抓取第一个 DOM 页面（shop.html 中的#shop1 并将其附加到index.html DOM 中。

我知道这样的傻事：

$('#toshop2').on('click', function() {
    window.open('shop.html#shop2', '_parent');
});

会起作用（是的，不会有过渡）。

问题是（假设没有其他解决方案，只能破解）：

1. 我可以/应该以不同的方式破解它吗？
2. 我还能以某种方式过渡到外部页面吗？

Answer 1

您可以手动请求外部文档，然后只将您想要的部分插入 DOM：

//delegate event handler binding to links with a custom class
//(any link that links to a pseudo-page in an external document
$(document).delegate('.my-external-links', 'click', function () {

    //get the location of the external document and the requested page (hash)
    var theHREF   = this.href,
        theTarget = '#shop1';
    if (theHREF.indexOf('#') > -1) {
        theTarget = '#' + theHREF.split('#')[1];
        theHREF   = theHREF.split('#')[0];
    }

    //first see if this page is already in the DOM, if so just navigate to it
    if ($(theTarget).length) {
        $.mobile.changePage($(theTarget));
        return;
    }

    //show the loading spinner
    $.mobile.showPageLoadingMsg();

    //do AJAX request to get new pages into the DOM
    $.ajax({
        url : theHREF,
        success : function (response) {

            //hide the loading spinner
            $.mobile.hidePageLoadingMsg();

            //find all the `data-role="page"` elements and add them to the DOM
            $(response).find('[data-role="page"]').appendTo('body');

            //now navigate to the requested page which should be in the DOM
            $.mobile.changePage($(theTarget));
        },
        error   : function (jqXHR, textStatus, errorThrown) { /*don't forget to handle errors*/ }
    });
    return false;
});

我很确定这也有一个插件，但正如您所见，它并没有那么多代码或复杂性。

Answer 2

为什么不尝试使用两次 changepage？

$.mobile.changePage( "shop.html", { transition: "none"} );
$.mobile.changePage( "#shop2", { transition: "slideup"} );

或者只是使用 loadPage 在后台将 shop.html 加载到 DOM 中，然后更改为#shop2？

$.mobile.loadPage( "shop.html" );
$.mobile.changePage( "#shop2", { transition: "slideup"} );