5

问题在于 iframes/bookmarkablity 和后退按钮功能。

我面临的这个问题是如何在不丢失后退按钮功能的情况下创建带有可书签 url 的 iframe。假设所有页面都在同一个域中,并且子页面通知父页面加载子页面以更新 window.location.hash 属性修改当前浏览器地址栏。
url 的更新在 IE/FF/webkit 上运行良好。但是后退按钮在 IE-8 中按预期工作,但浏览器后退按钮在 FF/webkit 中不起作用(只是 url 更改前一页未加载)。如果我们不更新 window.location.hash 属性,则返回按钮有效,但窗口 url 没有意义。
有没有办法在浏览器中获得这个功能,或者有没有更简单更好的方法(任何其他 js 库)。所有页面都从同一台服务器提供,以解决权限问题。

以下文件是

  • index_parent.html(包含 iframe)
  • 儿子.html
  • 孙子.html

儿子和孙子是链接的,并且父 iframe 中的儿子和孙子之间的任何导航都会更新地址栏,但会破坏 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>

猫孙子.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 回答