Question

我想知道是否可以使用下面的代码同时更改网址？

在此link处找到了一些更改网址的代码，但我无法让它们一起工作。

它是否可能或是否有更好的（工作）解决方案？

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TITLE</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">    
    $(function(){
    $('#profileMenu li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).prop('href');
        $('#profileContent').load(page_url);
    });
});
</script>
  </head>
  <body>


<div id="profileMenu">
    <ul id="profileMenu">
        <li><a href="page1.asp">page 1</a></li>
       <li><a href="page2.asp">page 2</a></li>
    </ul>
</div>
<div id="profileContent"></div>
  </body>
</html>

Answer 1

出于安全原因，在普通的JavaScript中这是不可能的。但是，使用HTML5，您可以结合使用pushState方法和onpopstate事件。

基本上，您pushState可以更改网址并将某些用户数据推送到历史记录中而不刷新页面，并更改div中的数据。如果您通过BACK / FORWARD按钮或JS浏览历史记录，onpopstate事件将触发提供推送的用户数据并更改URL，以便您可以处理它以显示缓存页面。

此处描述了此技术：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

有关onpopstate事件的更多信息 - https://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate

浏览器URL使用Javascript而不刷新页面并更改div内容

1 个答案: