Question

我有以下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');
        }
    });
});

在页面加载时，隐藏link1时会显示标识为link2的链接。当用户点击link1时，link1会显示link2，反之亦然。在进行切换时，它还会更改名为frame的iframe的来源。

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

注意：链接位于网页上，然后该网页内部是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>

Answer 1

您的意思是向右按下浏览器的后退按钮。

如果是这样的话：

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

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

这意味着什么？

单击该按钮时，您将使用哈希值更改URL。就像网址可以成为

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

然后，不是在单击中执行逻辑，而是在哈希更改时执行此操作。因此，当用户点击返回和/或转发逻辑时，这种方式总是完全运行。

几个月前我在http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

写了一篇关于这种技术的文章

当后退按钮被击中时，jQuery切换不起作用

1 个答案: