Question

因此，从下面的代码中我可以看到，我正在使用标记在我的网页上的标题之间导航。我需要在导航发生时调整一些div的大小，我正在使用一个JS函数，它按照单击按钮时的方式工作。

然而当用户按下浏览器的后退或前进按钮时，不会调用javascript函数，并且div不会调整大小，这会让我的页面变得非常糟糕。

任何人都有关于如何解决此问题的建议？

<a href="#header1" onclick="resizeContainer(this)">Go to header 1</a>
<a href="#header2" onclick="resizeContainer(this)">Go to header 2</a>

Answer 1

我会查看位于此处的Ben Alman的jQuery BBQ插件：http://benalman.com/projects/jquery-bbq-plugin/

它允许您在更改哈希时进行回调。

Answer 2

window.onbeforeunload = function (e) {
  var message = "Your message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

阅读Mastering The Back Button With Javascript

Answer 3

在我看来，如果你采取不同的方式，你可以有更多的控制权。我已经为您创建了一个工作示例，您可以在此处找到并编辑http://jsbin.com/jociy/5/

否则，请遵循：

$(document).ready(function(){

 $('.bar').on('click', function(){

    var hash = $(this).attr("href");

    // get the element position
    var toPosition = $(".foo[hash='" + hash + "']").offset().top;

    // scroll to the element position
    $('html, body').animate({
      scrollTop: toPosition
    }, "slow", function(){

      console.log("Expand fn() goes here!");

    });

 });

});

用于理解正在发生的事情的HTML：

  <a href="#foo1" class="go bar">Foo 1</a>
  <br>
  <a href="#foo2" class="go bar">Foo 2</a>

  <div class="foo red">I'm red!</div>
  <div class="foo green" hash="#foo1">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow" hash="#foo2">I'm yellow!</div>

这就是全部！希望这能帮到你！

捕获页面内的导航

3 个答案: