0

我有以下 jQuery 代码：

$(function() {
    var linkSet = $('#link1').add('#link2');
    linkSet.click(function() {
    linkSet.toggle();
        if ($(this).attr('id')=='link1'){
        $('#frame').attr('src', 'www.google.com');
        } else if ($(this).attr('id')=='link2'){
        $('#frame').attr('src', 'www.yahoo.com');
        }
    });
});

在页面加载时，带有 id 的链接link1在link2隐藏时显示。当用户单击 时link1，它将link1显示link2然后反之亦然。在切换发生时，它还会更改名为 的 iframe 的源frame。

我的问题是当我点击返回按钮时，框架的内容将返回到之前的内容，但链接没有改变。我在这里错过了什么？提前致谢！

注意：链接在网页上，然后在该网页内是 iframe。

编辑：

<div id="header">
<ul>
    <li><a id="link1" href=#">Link1</a>
    <li><a id="link2" href=#">Link2</a> 
</ul>
</div>
<div id="iframe">
    <iframe id="frame" src="www.google.com"></iframe>
</div>
4

1 回答 1

1

你的意思是当按下浏览器的后退按钮时。

如果是这样：

问题是您需要在历史记录更改时触发一个事件，因为这是响应历史记录更改的唯一简单方法（例如单击后退按钮时）。由于 iframe url 确实在变化，因此它自然也受到后退按钮的影响。

要在按下后退按钮等时使其他非基于历史记录的逻辑工作......有两种方法可以做到这一点。新的方法是使用历史 API，而另一种更受支持且更简单的方法是向 url 添加哈希。

这是什么意思？

当您单击按钮时，您会使用哈希更改 url。就像 url 可以变成

' http://domain.com/blah/#myHash '

然后，您无需在点击中执行逻辑，而是在哈希更改时执行此操作。因此，当用户单击后退和/或前进时，逻辑始终会完全运行。

几个月前，我在http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/上写了一篇关于这项技术的整篇文章

于 2013-08-07T03:39:13.547 回答