Jquery로 페이지 제목 변경


답변:


186
$(document).prop('title', 'test');

이것은 단순히 다음을위한 JQuery 래퍼입니다.

document.title = 'test';

>를 주기적으로 추가하려면 다음을 수행 할 수 있습니다.

function changeTitle() {
    var title = $(document).prop('title'); 
    if (title.indexOf('>>>') == -1) {
        setTimeout(changeTitle, 3000);  
        $(document).prop('title', '>'+title);
    }
}

changeTitle();

setTimeouts 문자열보다 setInterval 및 clearInterval을 사용하는 것이 더 좋지 않을 수 있습니까?
Spycho 2011-08-24

1
jQuery를 통해 페이지를 호출하는 SEO에 대한 의미는 무엇입니까?
TheBlackBenzKid 2014-06-16

20

제목을 변경하기 위해 jQuery를 사용할 필요가 없습니다. 시험:

document.title = "blarg";

이 질문 보기 을 참조하십시오.

버튼 클릭시 동적으로 변경하려면 :

$(selectorForMyButton).click(function(){
    document.title = "blarg";
});

루프에서 동적으로 변경하려면 다음을 시도하십시오.

var counter = 0;

var titleTimerId = setInterval(function(){
    document.title = document.title + '>';
    counter++;
    if(counter == 5){
        clearInterval(titleTimerId);
    }
}, 100);

버튼 클릭시 루프에서 동적으로 변경되도록 두 개를 함께 연결하려면 다음을 수행하십시오.

var counter = 0;

$(selectorForMyButton).click(function(){
  titleTimerId = setInterval(function(){
    document.title = document.title + '>';
    counter++;
    if(counter == 5){
        clearInterval(titleTimerId);
    }
  }, 100);
});

사용자가 버튼을 클릭하면 제목이 문제와 같이 변경되고이 변경 사항이 반복됩니다
Ilya Medvedev

4

사용

$('title').html("new title");

알아요,하지만 어떻게 동적으로 만들까요?
Ilya Medvedev

2
이것은 자바 스크립트와 같이 동적입니다. 우연히 "애니메이션"을 의미합니까?
darma

@IIya : 더 나은 답변을 위해 더 많은 마크 업과 코드를 제공합니다. 질문이 명확하지 않습니다.
Gowri

3

 var isOldTitle = true;
        var oldTitle = document.title;
        var newTitle = "New Title";
        var interval = null;
        function changeTitle() {
            document.title = isOldTitle ? oldTitle : newTitle;
            isOldTitle = !isOldTitle;
        }
        interval = setInterval(changeTitle, 700);

        $(window).focus(function () {
            clearInterval(interval);
            $("title").text(oldTitle);
        });


2

나는 (그리고 추천한다) :

$(document).attr("title", "Another Title");

IE에서도 작동합니다.

document.title = "Another Title";

어떤 사람들은 어떤 것이 더 나은지, prop 또는 attr 에 대해 토론 할 것입니다. DOM 속성을 호출하고 attr은 HTML 속성을 호출하기 때문에 이것이 실제로 더 낫다고 생각합니다.

DOM로드 후에 이것을 사용하십시오.

$(function(){
    $(document).attr("title", "Another Title");
});

도움이 되었기를 바랍니다.


1

제목 목록을 살펴 보는 몇 가지 코드 (순환 또는 원샷) :

    var titles = [
            " title",
            "> title",
            ">> title",
            ">>> title"
    ];

    // option 1:
    function titleAniCircular(i) {
            // from first to last title and back again, forever
            i = (!i) ? 0 : (i*1+1) % titles.length;
            $('title').html(titles[i]);
            setTimeout(titleAniCircular, 1000, [i]);
    };

    // option 2:
    function titleAniSequence(i) {
            // from first to last title and stop
            i = (!i) ? 0 : (i*1+1);
            $('title').html(titles[i]);
            if (i<titles.length-1) setTimeout(titleAniSequence, 1000, [i]);
    };

    // then call them when you like.
    // e.g. to call one on document load, uncomment one of the rows below:

    //$(document).load( titleAniCircular() );
    //$(document).load( titleAniSequence() );

1

나는 이것을 사용한다 :

document.title = "your_customize_title";

1

HTML 코드 :

Change Title:
<input type="text" id="changeTitle" placeholder="Enter title tag">
<button id="changeTitle1">Click!</button>

Jquery 코드 :

$(document).ready(function(){   
    $("#changeTitle1").click(function() {
        $(document).prop('title',$("#changeTitle").val()); 
    });
});

0
document.title="your title";

나는 이것을 선호한다.


이것은 기존 답변의 반복입니다.
Pang

0

jquery로 페이지 제목을 변경하는 매우 간단한 방법입니다.

<a href="#" id="changeTitle">Click!</a>

여기에 Jquery 메서드 :

$(document).ready(function(){   
    $("#changeTitle").click(function() {
       $(document).prop('title','I am New One');
    });
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.