Erreur de la propriété du formulaire "is undefined" dans certaines situations mais pas dans d'autres

Question

J'ai créé le script greasemonkey suivant pour me faire passer automatiquement les pages de vérification de l'âge de la vapeur :

// ==UserScript==
// ...
// @include     http://store.steampowered.com/agecheck/*
// ==/UserScript==

//Mini script for doing steam age checks automatically
if( document.URL.indexOf('agecheck') > -1 )
{
    var form = document.getElementById('agegate_box').getElementsByTagName('form')[0];
    form.ageDay.value = 18;
    form.ageMonth.value = 'August';
    form.ageYear.value = 1987;
    form.submit();
}

Voici un exemple d'une telle page : http://store.steampowered.com/agecheck/app/16730/ . Notez que cette page passera automatiquement au jeu si vous avez l'adresse de l'ordinateur. store.steampowered.com Le cookie "birthtime" est installé, vous devrez donc le supprimer d'abord.

Lorsque ce greasemonkey script est installé sur Firefox 17.0 (beta) fonctionnant sous Windows XP, il fonctionne bien.

J'ai ensuite installé le script sur ma machine Windows 7, qui fonctionne avec la dernière FF (16). Sur cette machine, le script se casse lors de l'accès à form.ageDay. La console d'erreur affiche :

Error: form.ageDay is undefined

Ce qui est encore plus étrange, c'est que si je colle simplement mon script dans le Scratchpad de Firefox (Shift+F4) et que je l'exécute, il fonctionne find et le formulaire se soumet.

Comment est-il possible que sur XP le script de GM fonctionne, et que sur Win7 le script fonctionne dans le scratchpad, mais que sur Win7 le script ne fonctionne pas dans GM ?

Une autre bizarrerie est que sur la machine Win7, si j'active Firebug, var form a clairement une propriété 'ageDay', mais l'expression de veille renvoie undefined ?

Answer 1

Ce code ne fonctionne pas pour moi, que ce soit sous Windows XP ou Windows 7. Il ne devrait pas non plus. Les scripts GM scripts ne peuvent pas (normalement) utiliser des objets de formulaire nommés comme ça. Voir Greasemonkey Pitfall : Formes et éléments de forme nommés .

Utilisez des méthodes sûres (et plus puissantes) pour accéder à ces éléments de formulaire. Par exemple, querySelector() . Ce script fonctionne pour moi sur la page que vous avez mise en lien :

// ==UserScript==
// @name        _delme 677
// @include     http://store.steampowered.com/agecheck/*
// @grant       GM_xmlhttpRequest
// ==/UserScript==

//Mini script for doing steam age checks automatically
if (/agecheck/i.test (location.pathname) ) {
    var ageForm = document.querySelector ("#agegate_box form");
    ageForm.querySelector ("[name='ageDay']").value     = 18;
    ageForm.querySelector ("[name='ageMonth']").value   = 'August';
    ageForm.querySelector ("[name='ageYear']").value    = 1987;
    ageForm.submit ();
}

---

Notes :

1. Firefox Scratchpad a fonctionné car il n'est pas isolé par la sandbox de GM.

2. Quant à la raison pour laquelle il semble fonctionner sous Win XP, c'est très probablement un coup de chance - il ne fonctionne pas pour moi sous XP, et il ne devrait pas.

   Il est possible que pour certains @grant none ce genre de code pourrait fonctionner. ( @grant none est appliqué par défaut dans de nombreux cas ; voir la documentation).

   Il se peut aussi que plusieurs versions du script aient été utilisées, ou même que FF ait été corrompu et ait dû être redémarré.

   L'essentiel est de ne pas coder de cette façon.

3. Quant à but the watch expression returns undefined? ... C'est juste l'isolation du bac à sable qui fonctionne, et cela ressemble à la même chose sur XP, pour moi.

4. Code, comme celui ci-dessus utilisant querySelector() fonctionnera sur à peu près toutes les pages qu'un utilisateur pourrait rencontrer, et cela fonctionne certainement dans le cadre des paramètres de cette question . Mais il ne fonctionne pas actuellement sur certains possible Formulaires HTML5 et quelques invalide HTML que certains sites auraient utilisé.

   Dans les deux cas, le code mentionné dans le lien du piège, que j'ai donné ci-dessus, fonctionnera, malgré certaines caractéristiques HTML invalides ou HTML5 de pointe proposées.

   Plus précisément, ce type de code, bien que moins souple que le code querySelector L'utilisation d'un système de gestion de l'information, qui fonctionne avec un plus grand nombre de scénarios (même s'il s'agit de HTML invalide) :

   if (/agecheck/i.test (location.pathname) ) {
       var ageForm = document.querySelector ("#agegate_box form");
       ageForm.elements.namedItem ('ageDay').value     = 18;
       ageForm.elements.namedItem ('ageMonth').value   = 'August';
       ageForm.elements.namedItem ('ageYear').value    = 1987;
       ageForm.submit ();
   }