使用JavaScript/jQuery从外部页面获取文档标题?

kknvjkwl  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(125)

我是一个JavaScript / jQuery的完全初学者,我目前正在努力实现一个目标,而不是从头开始学习。
我有一个动态网页与单独的链接;这些链接不刷新页面,而是刷新客户端的内容。但是,我并不 * 只是 * 想获取和显示页面 * 内容 *,我想用新加载文档的标题替换旧标题(例如,从“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);
});

(of这都导致不必要的页面刷新),以及无数的其他尝试(如果这些尝试是骇人听闻的道歉-正如我所说,主要是试图达到一个目标,在这个当前的时间,我想表明,我至少尝试了 * 的东西 *)。

任何帮助或指导都非常感谢!!
**更新:**请注意,此问题已于2018年8月10日更新。我意识到在我的示例尝试中有一个致命的错误,我认为这可能会混淆潜在的响应者(我以前尝试从function loadContent(href)的mainContent部分加载document.title!).

w8biq8rn

w8biq8rn1#

在不知道'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");
                    });
oknrviil

oknrviil2#

这里有一个简单的方法,解决了动态更改的问题,从外部页面与JavaScript/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", function(loadTitle) {
                    document.title = loadTitle.match(/<title>([^<]*)/)[1];  
                    $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.

});

相关问题