0

この問題は何度か議論されていますが、具体的な答えはまだ見えていません。

類似/同じ質問: SO の質問

私が持っているとしましょう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 ページ (から取得し、DOMshop.htmlに追加しindex.htmlます。

私は次のようなばかげたことを知っています：

$('#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 を 2 回使用してみませんか?

$.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 に答える