在框架中设置 location.hash答案

【问题标题】：Setting location.hash in frames在框架中设置 location.hash
【发布时间】：2010-10-13 04:17:18
【问题描述】：

我正在使用 ajax 来更新页面在框架中的位置。但是在设置哈希的位置时（特别是在 Chrome 和某些版本的 IE (5.5) 上，但偶尔在 IE7 上）页面正在重新加载。

下面的 html 演示了这个问题。

主框架.... frame.html 是

<html><head>
<frameset rows="*">
<frame src=sethash.html frameborder=0 scrolling=auto name=somebody>
</frameset>
</head></html>

sethash.html 页面是 .

<html><head>
<script language=JavaScript>
var Count = 0;
function sethash()
{  
  top.document.location.hash = "hash" + Count;  
  Count++;
}
</script>
</head>
<body onload="alert('loaded')">
<h1>Hello</h1>
<input type='button' onClick='sethash()' value='Set Hash'>
</body>
</html>`

在大多数加载 frame.html 的浏览器上，页面加载时会显示一次加载的警报。然后，当按下设置哈希按钮时，url 将被更改，但加载的警报的哈希不会再次显示。在 chrome 和某些版本的 I.E 上

Microsoft 报告 Internet Explorer 5.5 link text 可能存在相同问题

我不能使用微软建议的解决方案，即捕获事件而不触发它，而只是滚动到视图中，就像使用将 top.location.hash 设置为 onLoad 事件的一部分一样。

【问题讨论】：

标签： javascript ajax google-chrome frameset fragment-identifier

【解决方案1】：

Webkit（以及扩展名为 Chrome）对 location.hash 的行为很奇怪。有一些关于它的开放错误，最相关的可能是这个：https://bugs.webkit.org/show_bug.cgi?id=24578，它记录了您在 location.hash 更改时刷新页面的问题。看起来你现在最好的选择是祈祷并希望它得到及时修复。

不过，我无法重现 IE7 中的错误，而且你是我见过的第一个支持 IE5.5 的人，所以我无法真正帮助你 ;)

【讨论】：

【解决方案2】：

您还可以使用 HTML5 history.pushState() 更改哈希值，而无需在 Chrome 中重新加载页面。像这样的：

// frameset hash change function
function changeHash(win, hash) {
    if(history.pushState) {
        win.history.replaceState(null, win.document.title, '#'+hash);
    } else {
        win.location.hash = hash;
    }
}

在第一个参数中，您需要传递框架集顶部窗口。

【讨论】：

这行得通。小记：Chrome show a flicker in the favicon and stop/refresh button，看起来有点丑。

【解决方案3】：

我也遇到了这个问题。我的情况允许我创建一个窗口解除绑定事件，该事件将哈希设置为我想要的值，因为用户浏览器到下一页或刷新。这对我有用，但不确定它是否对你有用。

使用 jquery，我做到了：

如果（$.browser.webkit）{ $(窗口).unload(函数() { top.window.location.hash = hash_value; }); }别的{ top.window.location.hash = hash_value; }

从技术上讲，您不需要进行 webkit 检查，但我认为对于使用 firefox 的人来说，在刷新框架集之前查看正确的哈希值可能会很好。

-雅各布

【讨论】：

【解决方案4】：

对于 chrome 和 safari，您需要使用 window.location.href 而不是 window.location.hash 来获取哈希值

见下面的代码

function loadHash(varHash)
{
  if(varHash != undefined) {
    var strBrowser = navigator.userAgent.toLowerCase();

    if (strBrowser.indexOf('chrome') > 0 || strBrowser.indexOf('safari') > 0) {
        this.location.href = "#" + varHash;
    }
    else {
        this.window.location.hash = "#" + varHash;
    }
  }
}

【讨论】：

【解决方案5】：

我有一个解决方法，它涉及一个带有嵌入式 iframe 的整页表。我用一个占据 100% 高度和 100% 宽度并且有两行的表格替换了我的框架集。然后，在每个表格单元格中，我放置了一个 iframe，它为每个单元格占用 100% 的高度和宽度。从本质上讲，这模仿了一个框架集，而不是一个框架集。最重要的是，哈希更改时无需重新加载！

这是我的旧代码：

<html>
<head>
<title>Title</title>
</head>
<frameset rows="48,*" frameborder="yes" border="1">
    <frame name="header" noresize="noresize" scrolling="no" src="http://header" target="_top">
    <frame name="main" src="http://body" target="_top">
    <noframes>
    <body>
    <p>This page uses frames, but your browser doesn&#39;t support them.</p>
    </body>
    </noframes>
</frameset>
</html>

...这是我的新代码：

<html>
<head>
<title>Title</title>
<style type="text/css">
body { margin: 0px; padding: 0px; border: none; height: 100%; }
table { height:100%; width:100% }
td { padding: 0px; margin: 0px; border: none; }
td.header { height: 48px; background-color: black; }
td.body { background-color: silver; }
iframe.header { border: none; width: 100%; height: 100%; }
iframe.body { border: none; width: 100%; height: 100%; }
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
  <tr><td class="header"><iframe class="header" src="http://header" target="_top" scrolling="no"></iframe></td></tr>
  <tr><td class="body"><iframe class="body" src="http://body" scrolling="no"></iframe></td></tr>
</table>
</body>
</html>

希望这会有所帮助。

【讨论】：

【解决方案6】：

您是否尝试过为哈希创建隐藏链接并触发点击？

【讨论】：

【解决方案7】：

怎么办location.href = '#yourhash'; 可能会绕过这个bug。

【讨论】：