2

我有一个网站，通过用户单击一个按钮来加载其内容，然后单击调用一个 javascript 函数，该函数<div>通过使用 AJAX 和 jQuery 更改其内部 html 来仅更新中心元素的内容。

例如，当访问者想要访问我的联系页面时，他们单击联系按钮，然后通过从外部文件中提取该内容并使用它来替换 div 的内容，将 div 的内容更新为联系表单innerHTML。整个页面的实际地址没有改变，因为整个页面没有被重新加载，只是innerHTMLdiv 的。

除此之外，我的网站使用 PHP，并且我对其进行了编码，以便通过在 url 中传递变量，可以在页面加载时将各种内容填充到 div 中。例如，index.php?page=home将告诉 PHP 脚本从外部文件加载主页内容，同时index.php?page=contact将加载联系表单。通过这种方式，搜索引擎可以通过我的站点地图中的这些链接找到每个页面及其内容。

我的问题是，如果访问者单击一个按钮并将不同的内容加载到 div 中，然后单击浏览器的重新加载按钮或按 CTRL+R，则整个页面会重新加载，并且 div 当然会恢复到其原始内容。

我的问题是，有没有办法在浏览器刷新时加载特定页面？例如，如果访问者已经加载了页面，index.php?page=home然后点击了联系按钮并更新了 div 内容，然后按下了浏览器的刷新按钮，我可以以某种方式编写一个将加载的脚本index.php?page=contact，保留页面的外观和内容？

4

2 回答 2

1

选项 1：location.hash

更容易，但没有那么健壮。值得一看，但如果你想存储多个元素的状态，你可能需要选项 2。

这是下面代码的演示。

例子：

function onHashChange() {
    var hash = window.location.hash;
    // Load the appropriate content based on the hash.
}

$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);

$('#button').click(function(){
    window.location.hash = "home";
});

这样，您需要做的就是更改按钮更改的哈希值并使用hashchange事件处理页面加载。

选项 2：使用 History.js 的历史 API

实现起来有点困难（但并不多！），但更加健壮。依赖于广泛使用的框架。

另一种可能更简洁的方法是使用 History API。它允许您在window.location不刷新页面的情况下进行更改，允许您使用 JavaScript 处理这些更改。

虽然并非所有浏览器都支持该 API，但您可以使用History.jslocation.hash ，它在需要时提供回退。这是一个演示。

来自 History.js 的 github 页面：

History.js在所有浏览器中优雅地支持 HTML5 History/State API（pushState、replaceState、onPopState）。包括对数据、标题、replaceState 的持续支持。支持 jQuery、MooTools 和 Prototype。对于 HTML5 浏览器，这意味着您可以直接修改 URL，而无需再使用哈希。对于 HTML4 浏览器，它将恢复使用旧的 onhashchange 功能。

History.js 的示例：

function onStateChange() {
    var state = window.History.getState();
    // Handle state accordingly.

    // Fetch the data passed with pushState.
    var data = state.data;
    var title = state.title;
    var url = state.url;
}

// Check the initial state.
$('document').on('load', onStateChange);

// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);

// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' } 

// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");

大多数浏览器都会忽略状态名称。第三个参数是添加到 URL 的位。

于 2013-02-02T03:58:37.620 回答
0

几周前，我针对这种情况发布了一个 jQuery 插件，当开发人员想要将 ajax 内容添加到页面并动态更改 URL 时。

该插件是jQuery 动态 URL https://github.com/promatik/jQuery-Dynamic-URL

这里有一个演示：http: //promatik.pt/github/dynamic-url/

加载 ajax 内容时，可以推送URL 的路径，例如：

$.pushPath( 0 /*level*/, "contact" )
您的网站立即变为：example.com/contact

或者在您的情况下，您可以使用：
$.pushVar( "page", "contact" )
您的网站立即变为：example.com/?page=contact

这个插件还允许你这样做：
想象一下你给我一个链接：example.com/?page=contact

在索引页面中，$.getVars( )将返回：{"page" : "contact"}
因此，您可以使用此信息基于此查询构建您的页面。

你可以用这个插件做更多的事情，比如监听 onPopState 事件（这意味着用户在浏览器中返回或前进，所以你可以基于它重建你的页面）只需尝试演示......

重要信息：此插件适用于除 IE9 以外的所有现代浏览器，部分适用，您仍然可以访问 url 数据example.com/?page=contact（并基于此查询构建您的页面），但在用户体验期间不能动态修改 URL。

于 2013-02-02T04:34:42.270 回答