如何为使用 AJAX 获取的页面或内容添加书签？

Posted 2023-04-13

【中文标题】如何为使用 AJAX 获取的页面或内容添加书签？

【英文标题】：How to "bookmark" page or content fetched using AJAX?

【发布时间】：2011-03-08 14:03:54

【问题描述】：

如何为使用 AJAX 获取的页面或内容“添加书签”？

看起来如果我们只是将细节添加到“锚点”中，然后，使用路由甚至在 php 代码或 Ruby on Rails 的 route.rb 中捕获该部分，然后显示相应的内容或页面？ （显示整个页面或部分内容）

那么可以很简单吗？看起来这就是facebook的做法。还有什么其他的好方法？

【参考方案1】：

更新：现在有 html5 History API（pushState、popState），它弃用了 HTML4 hashchange 功能。 History.js 为 HTML4 浏览器提供跨浏览器兼容性和 optional hashchange 后备。

要存储页面的历史记录，最流行且功能齐全/受支持的方式是使用 hashchanges。这意味着，假设您从 yoursite/page.html#page1 转到 yoursite/page.html#page2，您可以跟踪该更改，并且由于我们使用的是哈希值，因此可以通过书签以及后退和前进按钮来获取它。

您可以使用 jQuery History 项目找到绑定哈希更改的好方法 http://www.balupton.com/projects/jquery-history

它还有一个全功能的 AJAX 扩展，允许您轻松地将 Ajax 请求集成到您的状态/哈希中，从而将您的网站转换为功能齐全的 Web 2.0 应用程序： http://www.balupton.com/projects/jquery-ajaxy

他们都在他们的演示页面上提供了很好的文档来解释正在发生的事情和正在发生的事情。

这是一个使用 jQuery History 的示例（取自演示站点）：

// Bind a handler for ALL hash/state changes
$.History.bind(function(state)
    // Update the current element to indicate which state we are now on
    $current.text('Our current state is: ['+state+']');
    // Update the page"s title with our current state on the end
    document.title = document_title + ' | ' + state;
);

// Bind a handler for state: apricots
$.History.bind('/apricots',function(state)
    // Update Menu
    updateMenu(state);
    // Show apricots tab, hide the other tabs
    $tabs.hide();
    $apricots.stop(true,true).fadeIn(200);
);

还有一个 jQuery Ajaxy 示例（取自演示站点）：

        'page': 
            selector: '.ajaxy-page',
            matches: /^\/pages\/?/,
            request: function()
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
                // Adjust Menu
                $menu.children('.active').removeClass('active');
                // Hide Content
                $content.stop(true,true).fadeOut(400);
                // Return true
                return true;
            ,
            response: function()
                // Prepare
                var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
                // Log what is happening
                window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
                // Adjust Menu
                $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
                // Show Content
                var Action = this;
                $content.html(data.content).fadeIn(400,function()
                    Action.documentReady($content);
                );
                // Return true
                return true;

如果你想获得查询字符串参数（所以yoursite/page.html#page1?a.b=1&a.c=2），你可以使用：

$.History.bind(function(state)
    var params = state.queryStringToJSON(); // would give you back a:b:1,c:2

因此，请查看这些演示链接以了解它们的实际效果以及所有安装和使用详情。

【参考方案2】：

如果你使用 jquery，你可以通过简单的方式来做到这一点。只需使用ajaxify 插件。它可以管理 ajax 页面的书签和许多其他事情。

【参考方案3】：

检查一下，可能会对您有所帮助：

如何从 javascript 更改 URL：http://doet.habrahabr.ru/blog/15736/ 如何将app状态打包成url：http://habrahabr.ru/blogs/javascript/92505/ 方法描述：http://habrahabr.ru/blogs/webstandards/92300/

注意：所有文章都是俄语的，所以要么谷歌翻译它们，要么只是查看代码并猜测细节。

【参考方案4】：

看看Single Page Interface Manifesto

【参考方案5】：

我尝试了很多包。 jQuery History 插件似乎是最完整的：

http://github.com/tkyk/jquery-history-plugin