0

問題があります。
状況は次のとおりです。サイトが内部にある iframe があります。また、プレーヤー付きのラッパーもあります。
ユーザーがサイト上のリンクに移動したときに停止または更新しないシングルトン プレーヤーにこれが必要です。
ラッパーとiframeの間のかわいい会話にpostMessageを使用して、履歴の変更（onpopstate）をトリガーしようとするので、ユーザーが「進む」の「戻る」をクリックすると、iframeがリロードされます。
私のイベントがストーリーの最初のページでのみ機能する理由がわかりません (そうではないかもしれませんが、まだわかりません)。そして、なぜ歴史のすべての状態がそこで倍増するのですか?
このような：

  1. ミュージックセット
  2. アーティスト
  3. アーティスト番号 34786
  4. 検索ページ
  5. 戻る (これでアーティスト ページが表示されます。iframe は正しく更新されますが、ラッパーの URL とタイトルは同じです)
  6. もう一度戻ります (ラッパーの URL を変更します)

これがトリガーの私のコードです。そして、そのような悪い行動の理由が何であるか教えてください。

ラッパー側

var zaya = document.getElementById("iframe").contentWindow;

window.onpopstate = function(data) {
    zaya.postMessage({
        name: "popstate",
        url: window.location.host + window.location.pathname
    },
        "http://urlofwebsite.com"
    );

    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

iframe 側

function listenerIF(data) {
    var info = data.data;

    if (data.origin !== "http://urlofwebsite.com") return;

    if (info.name === "popstate") {
        document.location = info.url;
    }
}

if (window.addEventListener) {
    window.addEventListener("message", listenerIF, false);
} else {
    window.attachEvent("onmessage", listenerIF);
}

しかし、このトリガーはとにかく動作しません...

4

1 に答える 1

0

iframe がその履歴状態をメインの履歴に追加することを知りませんでした。だから私はそれを次のように修正しました：

$("a").on("click", function(e){
        e.preventDefault();
        var neededUrl = this.getAttribute('href');
        /*here is a code with postMessage to wrapper So there will be pushState()*/
        window.location.replace(neededUrl);
    });
于 2016-10-18T10:23:41.043 に答える