Получить заголовок документа с внешней страницы с помощью Javascript / jQuery? - PullRequest
Новая
       11

Получить заголовок документа с внешней страницы с помощью Javascript / jQuery?

0 голосов
/ 01 октября 2018

Я новичок в JavaScript / jQuery и сейчас пытаюсь достичь цели, а не учиться с нуля.

У меня есть динамическая веб-страница с отдельными ссылками;эти ссылки не обновляют страницу, а обновляют содержимое на стороне клиента.Однако я не просто хочу получить и отобразить страницу content , Я хочу заменить старый заголовок заголовком только что загруженного документа (например, от «MySite | Home» до «MySite | About»).

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>

Использование вышеприведенного стороннего кода от CSS-хитрости : я пробовал различные дополнения в 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);
});

(оба из которых приводят к нежелательному обновлению страницы), наряду с бесчисленными другими попытками (извините, если эти попытки ужасны- как я уже сказал, в основном пытаюсь достичь цели в настоящее время, и я хотел показать, что я хотя бы попытался что-то ).

Любая помощь или направление очень ценится!!

ОБНОВЛЕНИЕ: Обратите внимание, что этот вопрос был обновлен с 08/10/18.В моих примерах попыток я понял существенную ошибку, которая, как мне казалось, может сбить с толку потенциальных респондентов (ранее я пытался загрузить document.title из раздела mainContent function loadContent(href)!).

1 Ответ

0 голосов
/ 01 октября 2018

Не зная, что вернет ваш '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");
                    });
...