Cambiar el título de la página con Jquery

81

¿Cómo hacer una <title>etiqueta de cambio dinámico con jquery?

ejemplo: agregar 3 >símbolos uno por uno

> title
>> title
>>> title

javascript jquery title

— Ilya Medvedev
fuente

185

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

Esto es simplemente un contenedor de JQuery para:

document.title = 'test';

Para agregar un> periódicamente puedes hacer:

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

changeTitle();

— Gazler
fuente

¿No sería mejor usar setInterval y clearInterval en lugar de una cadena de setTimeouts?

— Spycho

1

¿Cuáles son las implicaciones en SEO para llamar a la página a través de jQuery?

— TheBlackBenzKid

19

No es necesario usar jQuery para cambiar el título. Tratar:

document.title = "blarg";

Consulte esta pregunta para obtener más detalles.

Para cambiar dinámicamente al hacer clic en el botón:

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

Para cambiar dinámicamente en bucle, intente:

var counter = 0;

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

Para encadenar los dos juntos para que cambie dinámicamente al hacer clic en el botón, en un bucle:

var counter = 0;

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

— Spycho
fuente

cuando el usuario haga clic en el botón, el título se cambiará como en la pregunta, y este cambio se repetirá

— Ilya Medvedev

4

utilizando

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

— Gowri
fuente

Lo sé, pero ¿cómo hacerlo de forma dinámica?

— Ilya Medvedev

2

bueno, esto ES dinámico, es decir, con Javascript. ¿Quiere decir por casualidad "animado"?

— darma

@IIya: da más marcado y código para una mejor respuesta. sus preguntas confusas.

— 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);
        });

Expandir fragmento

— Shahbaz Ahmad
fuente

2

yo uso (y recomiendo):

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

y también funciona en IE. Este es un alias para

document.title = "Another Title";

Algunos debatirán sobre cuál es mejor, prop o attr , y dado que prop call propiedades DOM y attr Call HTML properties, creo que esto es realmente mejor ...

use esto después de la carga DOM

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

espero que esto ayude.

— Sakes Yordi
fuente

1

Algún código para recorrer una lista de títulos (circularmente o de una sola vez):

    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() );

— etuardu
fuente

1

Yo uso este:

document.title = "your_customize_title";

— Haimei
fuente

1

Código HTML:

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

Código Jquery:

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

— Ekta P. Sutariya
fuente

0

document.title="your title";

Prefiero esto.

— Raheem
fuente

Esta es solo una repetición de las respuestas existentes.

— Pang

0

Es una forma muy sencilla de cambiar el título de la página con jquery ..

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

Aquí el método Jquery:

$(document).ready(function(){   
    $("#changeTitle").click(function() {
       $(document).prop('title','I am New One');
    });
});

— Ekta P. Sutariya
fuente