履歴ブラウザが倍増

Question

問題があります。
状況は次のとおりです。サイト内にiframeがあります。 また、私はプレーヤーとラッパーを持っています。
ユーザーがサイトのリンクをたどったときに停止したり更新したりしないシングルトンプレーヤーには、これが必要です。
ラッパーとiframeの間のかわいい会話のためにpostMessageを使用すると、私は履歴の変更（onpopstate）をトリガしようとするので、ユーザーが "forward"の "back"をクリックするとiframeがリロードされます。
私のイベントがストーリーの最初のページでしか動作しない理由はわかりません（私はまだそれを得ていません）。そして、WHYYY OMG なぜ歴史のすべての状態が倍増しますか？このよう
：

1. Musicsets
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); 
} 

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

Answer 1

私は、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); 
    });