0

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

类似/相同的问题：所以问题

假设我有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 页面 (#shop1并将shop.html其附加到index.htmlDOM 中。

我知道这很愚蠢：

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

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

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

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

2 回答 2

0

您可以手动请求外部文档，然后只将您想要的部分插入 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;
});

我很确定也有一个插件，但是正如你所看到的，它并没有那么多代码或复杂性。

于 2012-04-04T18:16:29.200 回答
0

为什么不尝试两次使用 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"} );
于 2012-04-19T09:07:49.640 回答