web-dev-qa-db-fra.com

Comment définir le titre pour le nouvel onglet du navigateur?

J'ai une question sur le nouvel onglet pour le lien.

Puis-je quand même définir le titre de l'onglet du navigateur avant que l'utilisateur clique sur un lien? Il semble qu'il n'y ait aucun moyen de débattre du titre du nouvel onglet si le code HTML contenu dans le nouvel onglet n'a pas d'attribut title. Ai-je raison? Comment définir le titre?

//the href is dynamic so I can't set them one by one because I have 100+ html file here
<a href="test.html" target="_blank">open me<a>
javascripthtmlcss
9
BonJon

Comme vous l'avez, ce n'est pas possible car vos liens ne sont que des liens HTML normaux. Lorsque la nouvelle page s'ouvre dans un nouvel onglet, la page actuelle ne sera plus référencée et ne pourra donc en aucun cas être modifiée. Vous devrez ouvrir la page en utilisant javascript et définir le titre de cette façon.

Vous pouvez configurer cela de manière dynamique dans window onload pour rechercher toutes les balises a et ajouter un événement click qui ouvre la fenêtre et définit le titre.

Si vous voulez différents titres pour chaque page, vous pouvez le stocker dans un attribut data- dans la balise a.

Notez que cela ne fonctionnera qu'avec les pages du même domaine (pour des raisons de sécurité) et qu'il ne gère pas les personnes en cliquant avec le bouton droit de la souris et en appuyant sur "Ouvrir dans une nouvelle fenêtre". Le clic du milieu dans Windows semble cependant fonctionner.

HTML

<a href="test.html" data-title="A new page" target="_blank">open me</a>

JavaScript

window.addEventListener("load", function() {

    // does the actual opening
    function openWindow(event) {
        event = event || window.event;

        // find the url and title to set
        var href = this.getAttribute("href");
        var newTitle = this.getAttribute("data-title");
        // or if you work the title out some other way...
        // var newTitle = "Some constant string";

        // open the window
        var newWin = window.open(href, "_blank");

        // add a load listener to the window so that the title gets changed on page load
        newWin.addEventListener("load", function() {
            newWin.document.title = newTitle;
        });

        // stop the default `a` link or you will get 2 new windows!
        event.returnValue =  false;
    }

    // find all a tags opening in a new window
    var links = document.querySelectorAll("a[target=_blank][data-title]");
    // or this if you don't want to store custom titles with each link
    //var links = document.querySelectorAll("a[target=_blank]");

    // add a click event for each so we can do our own thing
    for(var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", openWindow.bind(links[i]));
    }

});

Sample JsFiddle

5
Rhumborl

Vous pouvez passer le titre avec hash et le placer sur une autre page, si celle-ci vous appartient et que vous pouvez modifier son code.

1ère page:

...
<a href="test.html#the_title_you_want" target="_blank">open me<a>
...

2ème page - modifier la balise d’ouverture du corps comme ceci:

<body onload="document.title=window.location.hash.replace('#','');">

Si la page à laquelle vous vous connectez n'est pas la vôtre, vous pouvez utiliser la méthode window.open:

<a href="javascript:var mw = window.open('test.html');mw.document.title = 'the_title_you_want';">open me</a>
2
nicael

Vous avez deux options. En utilisant du HTML pur, vous pouvez laisser l’utilisateur ouvrir des liens, puis changer le titre ultérieurement. Ou vous pouvez changer le titre avec JavaScript intégré. Voici comment vous faites les deux:

Méthode 1

Modifiez vos liens en attribuant un attribut cible, puis utilisez ce nom de fenêtre pour contrôler le document. Par exemple, dans vos liens, ce serait: <a href="whatever" target="theNewWindow">. Chaque fois que vous souhaitez modifier le titre de cette page, vous devez utiliser JavaScript comme suit: window.open("", "theNewWindow").document.title = "New Page Title!"; Le problème avec cette méthode est que tous les liens avec le nom de cette cible/fenêtre s'ouvrent dans cette même fenêtre. De plus, après le premier clic sur le lien, votre navigateur ne basculera pas automatiquement vers le nouvel onglet/fenêtre.

Méthode 2

Modifiez vos liens en attribuant un attribut onclick, qui ouvrirait le lien manuellement et modifierait immédiatement le titre de la page. En gros, cela ressemblerait à ceci: <a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">. Cela ouvre la fenêtre basée sur l'attribut href, modifie immédiatement le titre et configure la fenêtre pour changer le titre sur celui à la fin du chargement (juste au cas où il y aurait vraiment une balise de titre).

Le problème avec ces deux méthodes (comme mentionné par d'autres) est que vos fichiers HTML doivent être sur le même domaine. 

1
Pluto

Je n'ai pas vu addEventListener fonctionner de manière fiable, notamment lors de l'ouverture d'une nouvelle page à l'aide de javascript. Le meilleur moyen de changer le titre de l'onglet et de le faire fonctionner correctement est de définir un délai d'expiration jusqu'au chargement de la page. Vous devrez peut-être jouer avec la valeur de délai d'attente, mais cela fonctionne.

var newWindow = window.open(url, '_blank');

setTimeout(function () {
    newWindow.document.title = "My Tab Name";
}, 100);
0
Mike Collins

Si vous êtes à la page 1 et ouvrez la page 2 dans un nouvel onglet, vous ne pouvez pas définir le titre de la page 2 à partir de la page 1.

Si vous avez accès à la page 2, c'est possible, sinon non.

0
AtanuCSE

Vous pouvez créer votre propre page qui ouvre les autres pages (celles que vous ne pouvez pas éditer), dans un jeu de cadres. Vous pouvez ensuite modifier le titre de manière dynamique lors du chargement de votre page 2 ou, comme d'autres personnes vous l'ont suggéré, si vous utilisez window.open, vous pouvez contrôler le titre à partir de la page parent.

0
David P