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

正如我们现在所知道的那样，它将不起作用。它将从#shop1中获取第一个DOM页面shop.html并将其附加到index.html DOM中。

我知道有些傻话：

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

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

问题是（假设没有其他解决方案，但是黑客攻击）：

我/我应该以不同的方式破解它吗？
我可以以某种方式转换到外部页面吗？

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

jQueryMobile中的程序化（而不是基于链接）导航

2 个答案: