子iframe onload事件是否可以在父窗口上触发URL更新并仍在浏览器上保留后退按钮功能？

Question

子iframe onload事件是否可以在父窗口上触发URL更新并仍在浏览器上保留后退按钮功能？

Jg.*_*Jg. 5 javascript address-bar iframe bookmarks back-button

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

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

以下文件是

index_parent.html(包含iframe)
son.html
grandson.html

儿子和孙子是链接的,父子iframe中的儿子和孙子之间的任何导航都会更新地址栏,但会破坏FF中的后退按钮.

cat 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>

Run Code Online (Sandbox Code Playgroud)

猫son.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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

mat*_*000 0

您可以使用history.pushState在加载器函数中显式设置“后退”按钮的目标，如下所述：

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

归档时间：	16 年，1 月前
查看次数：	2399 次
最近记录：	7 年前