通过页面更改保持div打开？

问题描述：

我一直在试图让div'footer'停留在页面底部，并通过页面更改保持打开状态。我通过在主内容div上使用JQuery的.load函数实现了这一点，但是，使用该方法，当有人访问其他页面时，URL保持不变。有没有办法让链接更改URL，但保持div打开？我打算通过div播放音乐，因此它不能在页面切换之间关闭，否则音乐将停止/不得不重新缓冲。您通话后通过页面更改保持div打开？

window.history.pushState(obj, "Title", url);

：

答

您可以使用HTML5做到这一点。

它会更改显示的URL以匹配调用中的URL，但只允许属于同一个域的URL。

见https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

由于某种原因，我不想为我工作。最可能的兼容性问题。我打算发布我的代码，但在这里是新的，我似乎无法得到它的格式正确。 – Henzl0l 2011-12-19 17:58:11

只需在代码前面放四个空格，或粘贴它，选中它，然后按下“{}”按钮。 – Alnitak 2011-12-19 18:23:51

答

你将不得不使用框架和散列的网址，如果你想支持非HTML5的浏览器。我会用一个老式的框架。（我不能相信我实际上是在建议一个框架集，这被认为是不好的做法，而且我大概11年没有写过这样的代码，但在这种情况下，它实际上看起来是正确的解决方案，可以使用iframe ，但我认为一个框架实际上更有意义）

<frameset border="0" rows="*,100"> 
    <frame src="/mainPage" id="content" /> 
    <frame src="/footer" id="footer" /> 
</frameset>

使用Ben Alman的hashchange plugin，并使用这样的脚本来管理页面导航：

$(function() { 
    $("frame").load(function() { 
     document.title = w.document.title; 
     var links = $("a[href]", this.contentWindow.document); 
     links.attr("target", "_top"); 
     links.click(function (e) { 
      if (this.hostname == location.hostname) { 
       e.preventDefault(); 
       var path = this.pathname.replace(/^[^\/]/, "$&/"); 
       location.hash = "#" + path + this.search + this.hash; 
      } 
     }); 
    }); 
    var w = $("#content")[0].contentWindow; 
    $(window).hashchange(function() { 
     var hash = location.hash.substr(1) || "/mainPage"; 
     var contentLoc = w.location.pathname + w.location.search + w.location.hash; 
     if (hash.toLowerCase() != contentLoc.toLowerCase()) { 
      w.location.replace(hash); 
     } 
    }).trigger("hashchange"); 
});

演示：http://jumpingfishes.com/framed/

作为一个您可以使用AJAX重新加载内容，但框架可能更快实施。

+1甜蜜的例子gilly3！（顺便说一下，这就是插件的用途，对吧？！:) – 2011-12-20 00:19:57

通过页面更改保持div打开？

相关推荐