Question

我是JavaScript / jQuery的完全入门者，我目前正在尝试实现目标，而不是从头开始学习。

我有一个带有单独链接的动态网页；这些链接不会刷新页面，而是刷新客户端的内容。但是，我只是不想获取并显示页面内容，我想将旧标题替换为新加载的文档的标题（例如，从“ MySite |主页”到“ MySite |关于”）。

JS / jQuery：

$(function() {

if(Modernizr.history){

var newHash      = "",
    $mainContent = $("#main-content"),
    $el;

$("a").click(function() {
    _link = $(this).attr("href");
    history.pushState(null, null, _link);
    loadContent(_link);
    return false;
});

function loadContent(href){
    $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(href + " #guts", document.title, function() {
                    $mainContent.fadeIn(200);
                    $("a").removeClass("current");
                    console.log(href);
                    $("a[href$="+href+"]").addClass("current");
                });
            });
}

$(window).bind('popstate', function(){
   _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
   loadContent(_link);
});

} // otherwise, history is not supported, so nothing fancy here.


});

HTML：

<header>
<h1>Dynamic Page</h1>
<ul>
<li><a href="homepage.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</header>
<section id="main-content">
<div id="guts">
<p>This is the homepage content</p>
</div>
</section>

使用上述经过个人调整的third-party code from CSS-Tricks：我已经在function loadContent(href)（位于$myContent下）的内尝试了各种添加，例如：

$title.hide().load(href + document.title, function() {
$title.removeclass("current");
console.log(document.title);
$title[href$="document.title"]);
});

和

$title
.fadeOut(200, function() {
$title.hide().load(href + newTitle, function() {
newTitle.fadeIn(200);
});

（它们都会导致不必要的页面刷新），还有无数其他尝试（如果这些尝试令人震惊，我们深表歉意-正如我所说，主要是试图在目前达到目标，我想表明我至少尝试过 something ）。

非常感谢您的帮助或指导！

更新：请注意，此问题已于18/10/18更新。我意识到我的示例尝试中存在一个重大错误，我认为这可能会使潜在的回答者感到困惑（我以前曾尝试从function loadContent(href)的mainContent部分中加载document.title！）。

Answer 1

在不知道您的'load'将返回什么的情况下，我建议执行以下操作，这里服务器仅将标题作为文本发送：

$mainContent.hide().load(href + " #guts", document.title, function(responseText) {
                    document.title = responseText;
                    $mainContent.fadeIn(200);
                    $("a").removeClass("current");
                    console.log(href);
                    $("a[href$="+href+"]").addClass("current");
                });

如果相反，您的服务器发送了整个html页面作为响应，则可以使用以下内容：

$mainContent.hide().load(href + " #guts", document.title, function(responseText) {
                        document.title = $(responseText).find('title').text();
                        $mainContent.fadeIn(200);
                        $("a").removeClass("current");
                        console.log(href);
                        $("a[href$="+href+"]").addClass("current");
                    });

使用Javascript / jQuery从外部页面获取文档标题？

1 个答案: