5

質問は、iframes/bookmarkablity と戻るボタンの機能に関するものです。

私が直面しているこの問題は、戻るボタンの機能を失わずに、ブックマーク可能な URL を持つ iframe を作成する方法です。現在のブラウザのアドレス バーを変更します。
URL の更新は IE/FF/webkit で正常に機能します。ただし、戻るボタンは IE-8 では期待どおりに機能しますが、ブラウザーの戻るボタンは FF/webkit では機能しません (URL が変更されるだけで、前のページは読み込まれません)。window.location.hash プロパティを更新しない場合、戻るボタンは機能しますが、ウィンドウの URL は意味がありません。
ブラウザ間でこの機能を取得する方法はありますか、またはそれを行うためのより簡単な方法がありますか (他の js ライブラリ)。パーミッションの問題を回避するために、すべてのページが同じサーバーから提供されます。

以下のファイルは

  • index_parent.html (iframe を含む)
  • son.html
  • grandson.html

son と grandson はリンクされており、親 iframe 内の son と grandson の間のナビゲーションはアドレス バーを更新しますが、FF の [戻る] ボタンを壊します。

猫 index_parent.html

<html>    
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
 <title>Parent</title>    
    <style>   
        body{   
            margin:0;   
            overflow: hidden;     
        }    
        iframe {   
     border: 1;    
            height: 100%;   
            width: 100%;   
            overflow-x: hidden;   
        }   
    </style>     

      <script language="javascript">    
        function update(url,title){     
        alert("parent_update")    
        document.title=title;    
        window.location.hash ="#" + url; // comment this to get the back button working   
                    //in FF/webkit --but makes the url  non bookmarkable     
         }    
        function parent_loader(){   
        alert("parent_loader")    
        if (window.location.hash.substr(1)) {   
            document.getElementById("embedframe").src=window.location.hash.substr(1);    
        } else {    
            document.getElementById("embedframe").src="son.html";    
        }    
         }    
    </script>   

</head>   
<body onLoad="parent_loader()" >   
<H1> Parent</H1>    
    <iframe name="embedframe" id="embedframe" src="" frameborder="1" ></iframe>   
</body>   
</html>

猫の息子.html 

<html>   
<title> son </title>   

<script language="JavaScript">   
function son_loader() {     
    alert("son_loader");    
    if (self.location.href!=top.location.href) {    
          parent.update(location.href, document.title);  
    }   
};   
</script>

<body onload="son_loader()" >  
<H1> son </H1>  
<a href="grandson.html">Grandson <   /a>    
</body>   
</html>

cat grandson.html 

<html>   
<title> grandson </title>  

<script language="JavaScript">  
function grandson_loader() {    
    alert("grandson_loader");   
    if (self.location.href!=top.location.href) {    
        parent.update(location.href, document.title);    
    }  
}    

</script>    

<body onload="grandson_loader()" >  

<H1> Grandson </H1>    
<a href="son.html">Father </a>    
</body>   
</html>
4

1 に答える 1

0

ここで説明されているように、history.pushState を使用して明示的にローダー関数で [戻る] ボタンの宛先を設定できます。

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

于 2013-07-08T22:47:46.357 に答える