Discussion :

[jas789]

Non pas de message d'erreur mais le focus ne fonctionne pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
for (let el of document.querySelectorAll('input')) {
  if ("123456" === el.value) {
    el.focus();
  }
}
undefined

[Watilin]

C’est pas toujours facile d’observer un focus quand saisit des commandes dans la console. Essaye en différant l’exécution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
setTimeout(() => {
  for (let el of document.querySelectorAll('input')) {
    if ("123456" === el.value) {
      el.select();
      console.log("dans le if");
    }
  }
  console.log("fin de la boucle");
}, 1000);

Tu fais entrée, puis tu cliques rapidement dans la page et tu vois ce qui se passe.

Comme tu peux le voir j’ai ajouté des console.log(), et j’ai aussi remplacé focus() par select(). Si le but final est de permettre aux gens de sélectionner le texte, ce sera plus confortable.

[jas789]

Merci beaucoup pour ton aide cependant cela ne fonctionne toujours pas rien ne sa passe sur la page.
J'ai remarqué que même en marquant n'importe quoi le code ne renvoie pas d'erreur.

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
setTimeout(() => {
  for (let el of document.querySelectorAll('input')) {
    if ("blablabla" === el.value) {
      el.select();
      console.log("dans le if");
    }
  }
  console.log("fin de la boucle");
}, 1000);

ne retourne aucune erreur

Il doit avoir quelque chose qui fait que ça ne marche pas dans la page mais j'ai beau tourner le problème dans tous les sens cela reste un mystère pour moi.
Si tu le souhaites je peux t'envoyer le code complet de la page en privé afin que peut-être tu puisses identifier le problème.

[NoSmoking]

il y a peu de chance que l'élément soit dans le document au moment de l'appel, peut être un chargement Ajax de la page ou, comme évoqué, l'élément appartiendrait au contenu d'une <iframe>.
Ce point est donc à préciser.

On n'a malheureusement pas de détail sur ce point, soulevé précédemment !

J'ai remarqué que même en marquant n'importe quoi le code ne renvoie pas d'erreur.

même pas les messages « dans le if » et « fin de la boucle » ?

[jas789]

Non pas d'erreur je comprends pas pourquoi d'ailleurs

[Watilin]

Si tu le souhaites je peux t'envoyer le code complet de la page en privé afin que peut-être tu puisses identifier le problème.

Non, je ne fais pas d’aide en privé.

J'ai remarqué que même en marquant n'importe quoi le code ne renvoie pas d'erreur.

Ok, c’est ma faute, j’ai oublié ce qui avait été dit en début de conversation.

Et ce code retourne null

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector("[value='123456']")

De toute évidence les éléments recherchés ne se trouvent pas dans le document. Mais tout dépend de quel document on parle… Ce qui nous amène aux remarques de psychadelic et de NoSmoking :

[…] si ça se passe dans une fenêtre fille […]

il y a peu de chance que l'élément soit dans le document au moment de l'appel, peut être un chargement Ajax de la page ou, comme évoqué, l'élément appartiendrait au contenu d'une <iframe>.

Si c’est le cas il faudra utiliser contentDocument ou contentWindow comme expliqué dans la page MDN de <iframe>.

Mais avant, on va utiliser la console pour vérifier s’il s’agit bien d’un problème d’<iframe>.

Sous Firefox, la console a un bouton vers la droite, qui ressemble vaguement à une fenêtre, et dont l’infobulle dit « sélectionner une iframe en tant que document cible ». En cliquant dessus, ça ouvre un menu déroulant avec toutes les iframes trouvées. Voir cette page.

Sous Chrome, c’est un menu déroulant, plutôt du côté gauche, qui au départ affiche « top ». Voir cette page, paragraphe “Selecting execution context”.

En changeant de contexte et en essayant la commande document.querySelector("input") ou document.querySelectorAll("input") tu devrais réussir à trouver quelle iframe est la bonne

[jas789]

Je viens de faire un grand pas en avant merci beaucoup j'ignorais totalement l'existence des iframes.
J'ai réussi à identifier la frame et quand je le sélectionne dans la console le code suivant fonctionne parfaitement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector("[value='123456']").focus()

Il me reste seulement à trouver comment faire sans passer par la sélection manuelle dans la console.

EDIT: après plusieurs tentatives je n'y arrive pas la seule chose que j'arrive à faire est d'obtenir le focus de la iframe

[NoSmoking]

EDIT: après plusieurs tentatives je n'y arrive pas la seule chose que j'arrive à faire est d'obtenir le focus de la iframe

tu ne nous montrais pas par hasard le code que tu as testé on ne sait jamais cela pourrait aider à comprendre !?!

[jas789]

J'en est utilisé tellement c'est bien sa le problème

Ce qui me semble les plus prometteurs:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var myIframe = document.getElementById('mon_iframe');
myIframe.querySelector("[value='123456']").focus();

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('mon_iframe').querySelector("[value='123456']").focus();

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('mon_iframe').contentWindow.document.querySelectorAll("[value='123456']").focus();

[Watilin]

Pas de message d’erreur avec celle-là ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('mon_iframe').contentWindow.document.querySelectorAll("[value='4007087924935']").focus();

Il y a deux endroits où ça peut coincer :

• .contentWindow.document si les deux documents n’ont pas la même origine, voir same-origin policy ;
• querySelectorAll(…).focus(), parce que querySelectorAll() renvoie une collection d’éléments et qu’il faut faire une boucle pour appeler focus() sur chacun d’entre eux.

[jas789]

J'ai le message d'erreur suivant avec cette ligne de code:

SecurityError: Permission denied to access property "document" on cross-origin object

[Watilin]

Ok donc c’est un problème de same origin. Peux-tu modifier le code de l’iframe ? Il faudrait déplacer ton script, ou utiliser les messages.

[jas789]

Je ne peux pas modifier le code car le site ne m’appartiens pas j'utilise le script uniquement pour automatiser des actions sur le site. Comment faire pour déplacer le script ?
Je suis totalement perdu là ça me dépasse franchement.

[Watilin]

Il n’y a pas de solution simple. La contrainte de même origine est faite pour protéger les internautes. Si tu veux la contourner, il faut utiliser du code privilégié, autrement dit une extension.

Ce qui conviendrait bien dans ton cas, je pense, c’est un userscript. Les userscripts sont de sortes de mini-extensions gérées par un userscript manager, par exemple Greasemonkey ou Tampermonkey. Le manager te simplifie le travail car tu n’as qu’un fichier JavaScript à écrire. Voici un exemple simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ==UserScript==
// @name          Automatisation Focus
// @namespace     jas789
// @description   Donne automatiquement le focus à un input dans la page
// @match         *://domaine-de-l-iframe/*
// @grant         none
// @run-at        document-end
// ==/UserScript==
 
"use strict";
 
let oInput = document.querySelector("[value='4007087924935']");
console.log(oInput);
oInput.focus();

Assure-toi que la métadonnée @match correspond à l’URL (dans l’attribut src) de l’iframe. La syntaxe est celle des match patterns.

[jas789]

Je n'ai pas trouvé l'attribut Src dans le code mais je suppose que c'est celui que sélectionne dans la console pour que le code marche.

J'ai donc essayer dans grease monkey:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ==UserScript==
// @name          Automatisation Focus
// @namespace     jas789
// @description   Donne automatiquement le focus à un input dans la page
// @match         *://edit.monsite.fr/*
// @grant         none
// @run-at        document-end
// ==/UserScript==
 
"use strict";
 
let oInput = document.querySelector("[value='123456']");
console.log(oInput);
oInput.focus();

Ainsi qu'une variable du code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ==UserScript==
// @name          Automatisation Focus
// @namespace     jas789
// @description   Donne automatiquement le focus à un input dans la page
// @match         *://edit.monsite.fr/*
// @include       https://urlpageprincipale.monsite.fr/*
// @grant         none
// @run-at        document-end
// ==/UserScript==
 
"use strict";
 
let oInput = document.querySelector("[value='123456']");
console.log(oInput);
oInput.focus();

Aucun des deux codes ne fonctionne rien ne se passe sur la page en question.

Par contre si je sélectionne dans la console la iframe https://edit.monsite.fr/edit et que j'envoie le code suivant cela fonctionne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
"use strict";
 
let oInput = document.querySelector("[value='123456']");
console.log(oInput);
oInput.focus();

[Watilin]

C’est peut-être une histoire de création dynamique. Je veux dire par là que l’<input> que tu cherches n’existe pas au moment où le userscript est exécuté (à l’évènement DOMContentLoaded), il est créé plus tard par un script de la page.

On peut essayer de voir si l’input existe lors de l’évènement load, qui a lieu plus tard.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

// @run-at        document-idle

Voir @run-at.

Ou si ça ne marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ==UserScript==
// @name          Automatisation Focus
// @namespace     jas789
// @description   Donne automatiquement le focus à un input dans la page
// @match         *://edit.monsite.fr/*
// @grant         none
// @run-at        document-end
// ==/UserScript==
 
"use strict";
 
window.addEventListener("load", function () {
  let oInput = document.querySelector("[value='123456']");
  console.log(oInput);
  oInput.focus();
});

Si ça ne marche pas, il y a d’autres solutions mais elles sont plus complexes, donc j’espère qu’on n’aura pas besoin d’aller jusque-là.

Greasemonkey n’est pas parfait et, à l’heure où nous parlons, je crois qu’il ne sait toujours pas faire remonter les erreurs dans la console. Il faut ouvrir « l’autre » console, celle où vont les messages des extensions et de la mécanique interne du navigateur. Sous Firefox il faut faire Ctrl+maj+J. Dans cette console c’est le bordel, il y a des centaines de messages, alors il faut filtrer, par exemple avec la chaîne « userscript » ou « user script ». Mais souvent on n’a pas le vrai message d’erreur et ce n’est pas très utile.

N’hésite pas à mettre un gros bloc try autour du script entier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
try {
 
  ...
 
}
catch (err) {
  console.error(err);
}

Ça te permet de « rediriger » le message d’erreur vers la console F12 normale.

Et pour me simplifier la vie, j’ai un petit truc. Pour voir d’entrée de jeu si mon usescript est bien exécuté, et s’il est exécuté jusqu’au bout, j’ai pris l’habitude de rajouter ceci dans mes fichiers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// ==UserScript==
// ...
// ==/UserScript==
 
"use strict";
 
console.log("%cscript start", "color: cyan");
 
...
 
console.log("%cscript end", "color: cyan");

Ces messages vont également dans la console normale.

[jas789]

Pour moi la iframe ainsi que l'input existe seulement après le clic sur le bouton modifié.

Ne marche pas
// @run-at document-idle

Le nouveau code non plus rien ne sa passe a chaque fois.

Dans la console ctrl + Maj + j je ne trouve pas d'erreur.

Plus on avance et plus tout cela devient du chinois pour moi ça commence réellement à dépasser mes compétences de petit débutant.

[Watilin]

[…] clic sur le bouton modifié.

Oh… J’avais oublié ça. Je viens de relire ton premier message.

2/Le script se lance automatiquement grâce à un module Firefox

Quel est ce module Firefox dont tu parles ?

Mais revenons au sujet. Cette histoire de bouton rend les choses plus simples. Il suffit de rajouter ton code après l’appel à .click.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.getElementById("boutonmodifier").click();
 
let oInput = document.querySelector("[value='123456']");
console.log(oInput);
oInput.focus();

[jas789]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.getElementById("boutonmodifier").click();
 
let oInput = document.querySelector("[value='123456']");
console.log(oInput);
oInput.focus();

J'utilise Greasemonkey comme extension.
Le code que tu me donnes clic bien sûr le bouton modifié mais rien ne sa passe. (avec greasemonkey)
Peut-être faudrait-il ajouter un délai pour le chargement de la page ?

EDIT:
Ne fonctionne pas non plus

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
document.getElementById("boutonmodifier").click();
 
setTimeout(() => {
  for (let el of document.querySelectorAll('input')) {
    if ("123456" === el.value) {
      el.select();
      console.log("dans le if");
    }
  }
  console.log("fin de la boucle");
}, 1000);

[Watilin]

Donc tu utilisais Greasemonkey avant que je t’en parle ?

S’il n’y a rien dans la console, c’est que le script a une erreur quelque part. Sinon tu devrais au moins voir le message « fin de boucle ». As-tu essayé le bloc try comme je t’ai montré ?