1

jQuery モバイルでは、iframe を使用しています。戻るボタン (アプリまたはブラウザの戻るボタン) を押すと、iframe コンテンツが消えます。次に戻るボタンをもう一度押すと、アプリは前のページに遷移します。

iFrame が履歴に追加されています。これは絶対にあってはならないことだと思いました。

可能な限り単純な形式でパズルを説明するjsFiddleが作成されました。

その中に、2 つの jQuery Mobile ページを作成する HTML のフラグメントがあります。最初のページには、2 番目のページに移動するためのリンクがあります。2 番目のページには、2 つの戻るボタン (ヘッダーに 1 つ、ページのボタンとして 1 つ) と、<iframe>. 問題を再現するには:

  • 1ページから2ページへのリンクをたどってください
  • 2 ページ目で、ボタンをクリックして<iframe>
  • 戻るボタンのいずれかをクリックします

ページ 1 に戻らないことに注意してください。

HTMLは次のとおりです。

<div data-role="page">
    <p>This is page 1</p> <a href="#page2">Go to page 2</a>
</div>

<div data-role="page" id="page2">
    <div data-role="header" data-add-back-btn="true">
         <h1>Page 2</h1>
    </div>
    <p>This is page 2</p>
    <p>What follows is the iFrame</p>
    <iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
    <p>This button issues a programmatic back</p>
    <button id="backButton">Go Back</button>
    <p>This button loads new content into the iframe</p>
    <button id="reloadButton">Reload iFrame</button>
</div>

ここにJavaScriptがあります

$(function () {
    $("#backButton").click(function () {
        jQuery.mobile.back();
    });
    $("#reloadButton").click(function() {
        $("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
    });
});

(これは jsFiddle にあるコードです)。

4

2 に答える 2

0

（これまでのところ）機能しているように見える1つの答えは、属性を変更してリロードしようとするのではなく、新しい要素を挿入して以前にあった要素を置き換えることです。これを実現するロジックは次のようになります。<iframe>src<iframe>

$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');

それが機能していることを示す対応するjsFiddleが利用可能です。

これは、Chrome 38.0 および Internet Explorer 11.0 でテストされています。

于 2014-11-01T22:31:18.040 に答える
0

JQMがプログラムで履歴をreplaceStateで操作しているためだと思います。ドキュメントで ajax 環境で履歴を追跡する方法について詳しく読むことができます

いくつかのコードまたはフィドルを見せてください。より詳細な回答を提供できる場合があります。

于 2012-04-14T04:57:27.680 に答える