Question

所以我要做的就是通过javascript更改div的内容，这也会改变浏览器中的URL。

我index.php中的内容是这样的：

<a href="#page" onclick="loadContent()";>
<div id="pageContent"> 
        Here is some content
</div>

在我的.js文件中，我有一个这样的函数来替换div中的内容：

function loadContent()
{
     $("#pageContent").load("new_page.php");
}

现在发生的事情是浏览器中的网址更改为：exmaple.com/#page。但是当我之后重新加载此链接时，它会加载页面的“旧内容”，而不是具有更改的div的网站。

如何加载新内容并以某种方式更改URL，在我在URL中键入exmaple.com/#page后，它会在div中加载包含新内容的页面？

Answer 1

使用window.location =“/ absolute / path / to / page＃your-div-id”;

您可以在目标网页元素上使用.scrollIntoView()。

document.getElementById("the_div_id").scrollIntoView(true);

Answer 2

创建一个onLoad方法来检查是否需要加载任何页面内容。

<body onload="onPageLoad();">

function onPageLoad() {
  var location = window.location.hash;
  if(location == "somePage") {
    loadContent();
  }
}

如果您使用的是JQuery，您还可以使用Ready-Event。

$(document).ready(function(){ /** code **/ })

Answer 3

你可以：

1）抛弃ajax并使用普通链接

2）检查pageload上的哈希值，然后加载正确的内容：

$(function(){

    var hash = window.location.hash.replace('#','');
    var pages = ['home','contact','about'];
    if(pages.indexOf(hash) > 0){
        $("#pageContent").load(hash+".php");
    }

});

Answer 4

您可以使用事件侦听器来检查锚点何时更改，并检查何时页面加载任何锚点。

//Listener
$(window).on('hashchange', loadPage);
$(window).on('load', loadPage);

function loadPage() {
   if(loaction.hash.length > 1) {
      //The anchor has been changed.
      loadContent("example.com/example.php?page=" + location.hash.substring(1));
   } else {
      //Load standard page if no anchor
      ...
   }

}

当锚更改时，脚本会加载页面。

<a href="#page">Page</a>

加载内容时更改URL

4 个答案: