11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Supprimer le focus d'une iframe

Bonjour,

Merci pour votre site, cela donne beaucoup d'idées et répond à beaucoup de questions.
Je débute en javascript ...

Je sais que ce problème est courant après de nombreuses heures de recherches mais les solutions proposées ne correspondent pas à mes attentes (je n'ai pas trouvé en tout cas). Voici le problème :

J'ai une page Web qui contient des ancres et aussi, en bas de page, une iframe qui vole le focus. (Une page d'exemple en fin de message pour tester)

Ainsi, après le chargement de la page, le lecteur se retrouve en bas de page.

scrollTo() après chargement ne résout pas le problème car sinon je perds mes ancres.

blur(), focus({preventScroll:true}) ne résolvent pas le problème.

Dans différents forums on propose de modifier le focus après chargement de la page mais là encore, je perds mes ancres.

document.activeElement après le chargement de la page me renvoie l'iframe et dans l'iframe, le tag de l'élément actif me donne BODY.

Je voudrais donc savoir s'il existe une solution javascript pour retirer le focus d'une iframe ou, au moins, changer l'ordre des focus ?

Voici une page pour tester le problème :


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<script>
//Quelque chose ici ?
</script>
</head>
<body>
    <h1>Problème de focus sur iframe</h1>

    <div class="sommaire" style="text-align:center;">

        <a href=#poeme1 target="_blank"> Poème 1</a><br/>
        <a href=#poeme2 target="_blank"> Poème 2</a><br/>
        <a href=#poeme3 target="_blank"> Poème 3</a><br/>

    </div>

    <div id="poeme1" class="poeme" style="width:30%;"> 

    <h1> Poème 1 </h1>

    <p>Souvent, pour s’amuser, les hommes d’équipage
    Prennent des albatros, vastes oiseaux des mers,
    Qui suivent, indolents compagnons de voyage,
    Le navire glissant sur les gouffres amers.</p>

    <p>A peine les ont-ils déposés sur les planches,
    Que ces rois de l’azur, maladroits et honteux,
    Laissent piteusement leurs grandes ailes blanches
    Comme des avirons traîner à côté d’eux.</p>

    <p>Ce voyageur ailé, comme il est gauche et veule !
    Lui, naguère si beau, qu’il est comique et laid !
    L’un agace son bec avec un brûle-gueule,
    L’autre mime, en boitant, l’infirme qui volait !</p>

    <p>Le Poète est semblable au prince des nuées
    Qui hante la tempête et se rit de l’archer ;
    Exilé sur le sol au milieu des huées,
    Ses ailes de géant l’empêchent de marcher.</p>

    Charles Baudelaire

    </div>

    <div id="poeme2" class="poeme" style="width:30%;"> 

    <h1> Poème 2 </h1>

    <p>Souvent, pour s’amuser, les hommes d’équipage
    Prennent des albatros, vastes oiseaux des mers,
    Qui suivent, indolents compagnons de voyage,
    Le navire glissant sur les gouffres amers.</p>

    <p>A peine les ont-ils déposés sur les planches,
    Que ces rois de l’azur, maladroits et honteux,
    Laissent piteusement leurs grandes ailes blanches
    Comme des avirons traîner à côté d’eux.</p>

    <p>Ce voyageur ailé, comme il est gauche et veule !
    Lui, naguère si beau, qu’il est comique et laid !
    L’un agace son bec avec un brûle-gueule,
    L’autre mime, en boitant, l’infirme qui volait !</p>

    <p>Le Poète est semblable au prince des nuées
    Qui hante la tempête et se rit de l’archer ;
    Exilé sur le sol au milieu des huées,
    Ses ailes de géant l’empêchent de marcher.</p>

    Charles Baudelaire

    </div>

    <div id="poeme3" class="poeme" style="width:30%;"> 

    <h1> Poème 3 </h1>

    <p>Souvent, pour s’amuser, les hommes d’équipage
    Prennent des albatros, vastes oiseaux des mers,
    Qui suivent, indolents compagnons de voyage,
    Le navire glissant sur les gouffres amers.</p>

    <p>A peine les ont-ils déposés sur les planches,
    Que ces rois de l’azur, maladroits et honteux,
    Laissent piteusement leurs grandes ailes blanches
    Comme des avirons traîner à côté d’eux.</p>

    <p>Ce voyageur ailé, comme il est gauche et veule !
    Lui, naguère si beau, qu’il est comique et laid !
    L’un agace son bec avec un brûle-gueule,
    L’autre mime, en boitant, l’infirme qui volait !</p>

    <p>Le Poète est semblable au prince des nuées
    Qui hante la tempête et se rit de l’archer ;
    Exilé sur le sol au milieu des huées,
    Ses ailes de géant l’empêchent de marcher.</p>

    Charles Baudelaire

    </div>

<iframe class="embTrinket" src="https://trinket.io/embed/python/7de56c7654" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen ></iframe>

</body>
</html>

Modifié par WillEC (06 Mar 2020 - 16:45)
Hello montre nous aussi ton javascript Smiley smile
ou partage nous ta page d'exemple que tu as oublié de mettre Smiley smile
Modifié par JENCAL (06 Mar 2020 - 16:46)
Merci pour la réponse rapide,

Je n'ai pas de code javascript (juste des tests qui n'aboutissent pas ou qui ne résolvent pas le problème) :


//onload c'est peut-etre deja trop tard pour ne pas aller en bas de page ...
window.onload = function() {
    //window.scrollTo(0, 0);//Je perds mes ancres (mapage.html#poeme1 envoie en bas de la page)
    //Récupérer ces iframes
    var listTk = document.getElementsByClassName("embTrinket");
    //listTk[0].blur(); //marche pas  [decu]
    //listTk[0].focus({preventScroll:true});// marche pas  [decu]

    //Récupérer l'élément actif du doc parent :
    var elemCourant = document.activeElement;
    //alert(elemCourant.className);// renvoie 'IFRAME'
    //elemCourant.blur();// marche pas  [decu]
   
};


La page html d'exemple est donnée dans le message. N'est ce pas suffisant pour tester ce problème ? voire de le résoudre ?

Précision : Je ne contrôle pas le contenu de l'iframe et aucune option pour retirer ce focus n'est proposée dans le code d'intégration. En allant à l'adresse : https://trinket.io/embed/python/7de56c7654, on a le contenu. J'ai cherché à retirer ce focus à l'intérieur mais je n'ai pas trouvé.

J'ai bien pensé à des trucs moches du style :
-- ancrer le sommaire
-- A la fin du chargement de la page, tester l'url, et s'il n'y pas d'appel d'ancre, on envoie au sommaire, sinon, on envoie sur l'ancre...
Mais je trouve cela plutôt moche non ?

Merci d'avance,
Modifié par WillEC (06 Mar 2020 - 17:59)
Modérateur
pour qu'un element puisse recevoir le focus, il faut que celui-ci soit clickable (lien/element de formulaire) .. ou qu'il ait un attribut tabindex avec une valeur.

si tu veut donner le focus à body, il te faut lui donner cette attribut ou choisir un autre element . une ancre vide au début de ton document ou dans ce test ton h1 : https://codepen.io/gc-nomade/pen/PoqOzed

Il faut aussi replacer le focus lorsque le contenu de l'iframe est chargée

exemple sur ton <h1 tabindex="0">Problème de focus sur iframe</h1> 

document.querySelector("iframe").addEventListener( "load", function(e) {
 document.querySelector('h1[tabindex]').focus();
} );



a propos du tabindex https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex et aussi https://www.alsacreations.com/article/lire/570-Histoire-de-tabindex.html
Modifié par gcyrillus (06 Mar 2020 - 18:19)
Meilleure solution
Merci !

Cela fonctionne parfaitement. Tout est dans le placement de cette iframe sur notre page :
--sortir l'iframe du flux puis
--la remettre dans le flux après chargement

Cela fonctionne aussi sans le tabindex ? (je n'ai pas tout compris peut-être).
Qu'en penses-tu ? :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style>
.embTrinket {position:fixed;}/*retiré du flux normal*/
</style>
<script>
window.onload = function() {
    //   On récupère toutes les iframes voleuses de focus
    var listTk = document.getElementsByClassName("embTrinket");
    listTk[0].style.position = "static";//Repositionné dans le flux, a faire sur toutes ces iframes
};
</script>
</head>
<body>



     <h1 >Problème de focus sur iframe</h1> 

    <div class="sommaire" style="text-align:center;">

        <a href=#poeme1 target="_blank"> Poème 1</a><br/>
        <a href=#poeme2 target="_blank"> Poème 2</a><br/>
        <a href=#poeme3 target="_blank"> Poème 3</a><br/>

    </div>

    <div id="poeme1" class="poeme" style="width:30%;"> 

    <h1> Poème 1 </h1>

    <p>Souvent, pour s’amuser, les hommes d’équipage
    Prennent des albatros, vastes oiseaux des mers,
    Qui suivent, indolents compagnons de voyage,
    Le navire glissant sur les gouffres amers.</p>

    <p>A peine les ont-ils déposés sur les planches,
    Que ces rois de l’azur, maladroits et honteux,
    Laissent piteusement leurs grandes ailes blanches
    Comme des avirons traîner à côté d’eux.</p>

    <p>Ce voyageur ailé, comme il est gauche et veule !
    Lui, naguère si beau, qu’il est comique et laid !
    L’un agace son bec avec un brûle-gueule,
    L’autre mime, en boitant, l’infirme qui volait !</p>

    <p>Le Poète est semblable au prince des nuées
    Qui hante la tempête et se rit de l’archer ;
    Exilé sur le sol au milieu des huées,
    Ses ailes de géant l’empêchent de marcher.</p>

    Charles Baudelaire

    </div>

    <div id="poeme2" class="poeme" style="width:30%;"> 

    <h1> Poème 2 </h1>

    <p>Souvent, pour s’amuser, les hommes d’équipage
    Prennent des albatros, vastes oiseaux des mers,
    Qui suivent, indolents compagnons de voyage,
    Le navire glissant sur les gouffres amers.</p>

    <p>A peine les ont-ils déposés sur les planches,
    Que ces rois de l’azur, maladroits et honteux,
    Laissent piteusement leurs grandes ailes blanches
    Comme des avirons traîner à côté d’eux.</p>

    <p>Ce voyageur ailé, comme il est gauche et veule !
    Lui, naguère si beau, qu’il est comique et laid !
    L’un agace son bec avec un brûle-gueule,
    L’autre mime, en boitant, l’infirme qui volait !</p>

    <p>Le Poète est semblable au prince des nuées
    Qui hante la tempête et se rit de l’archer ;
    Exilé sur le sol au milieu des huées,
    Ses ailes de géant l’empêchent de marcher.</p>

    Charles Baudelaire

    </div>

    <div id="poeme3" class="poeme" style="width:30%;"> 

    <h1> Poème 3 </h1>

    <p>Souvent, pour s’amuser, les hommes d’équipage
    Prennent des albatros, vastes oiseaux des mers,
    Qui suivent, indolents compagnons de voyage,
    Le navire glissant sur les gouffres amers.</p>

    <p>A peine les ont-ils déposés sur les planches,
    Que ces rois de l’azur, maladroits et honteux,
    Laissent piteusement leurs grandes ailes blanches
    Comme des avirons traîner à côté d’eux.</p>

    <p>Ce voyageur ailé, comme il est gauche et veule !
    Lui, naguère si beau, qu’il est comique et laid !
    L’un agace son bec avec un brûle-gueule,
    L’autre mime, en boitant, l’infirme qui volait !</p>

    <p>Le Poète est semblable au prince des nuées
    Qui hante la tempête et se rit de l’archer ;
    Exilé sur le sol au milieu des huées,
    Ses ailes de géant l’empêchent de marcher.</p>

    Charles Baudelaire

    </div>

    <iframe class="embTrinket" src="https://trinket.io/embed/python/7de56c7654" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen ></iframe>

</body>
</html>


En tout cas, pour moi, c'est résolu ! Merci encore ! Smiley ravi
Modifié par WillEC (06 Mar 2020 - 19:07)
Modérateur
WillEC a écrit :


Cela fonctionne aussi sans le tabindex ? (je n'ai pas tout compris peut-être).
Qu'en penses-tu ? :

En tout cas, pour moi, c'est résolu ! Merci encore ! Smiley ravi


Content pour toi,

si tu n'as plus besoin de replacé le focus sur ta page, alors aucun intérêt .

Je ne trouvais pas forcement ce fixed/static un bon choix dans le cas ou l'iframe se trouve dans la partie visible de ta page au chargement, le passage de l'un à l'autre est un peu brut Smiley cligne

sinon, tu n'est pas obligé de passé par une class avec querySelectorAll , tu peut cibler directement un élément en javascript en utilisant un sélecteur de style 

window.onload = function() {
  for (let iframe of document.querySelectorAll("iframe")) {
    iframe.style.position = "static";
  }
};


Malgré tout je resterai dans l'idée d'attendre que l'iframe soit bien chargée, nous n'avons pas tous des connexions qui décoiffent, la mienne incite a aller me prendre un café parfois Smiley cligne

Le forum reste ouvert ,
bonne continuation
"Malgré tout je resterai dans l'idée d'attendre que l'iframe soit bien chargée, nous n'avons pas tous des connexions qui décoiffent, la mienne incite a aller me prendre un café parfois"

Je comprends (je crois). (Je n'ai pas réussi à citer Smiley rolleyes )

window.onload n'indique que la fin de chargement du doc parent, l'iframe peut mettre plus de temps à charger. Dans ce cas, l'iframe risque de récupérer la position 'static' avant la fin de son chargement et donc, voler le focus... est-cela ?

"si tu n'as plus besoin de replacé le focus sur ta page, alors aucun intérêt ."

En effet, soit le lecteur vient sur la page sans ancre donc il doit se retrouver en haut de page, soit il vient avec une ancre donc il doit se retrouver sur l'ancre.

"sinon, tu n'es pas obligé de passé par une class avec querySelectorAll , tu peux cibler directement un élément en javascript en utilisant un sélecteur de style"

Merci ! Tu as raison, de toute façon, aucune iframe devrait voler le focus...

Bon courage à vous et encore merci pour votre site plein de bonnes idées et de bons conseils.
Modifié par WillEC (06 Mar 2020 - 19:40)
Sujet clos
Aller à