11571 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous

Dans un fichier xx.js je définis une variable CHANGEEDIT
Dans un fichier yy.js je veux savoir si le fichier xx.js est disponible

Dans le passé, si je voulais tester si une variable n'était pas définie j'écrivais

if(typeof CHANGEEDIT=== 'undefined)


Je constate que si cela fonctionne toujours sous Firefox ce n'est plus le cas sous Chrome
Je reçois le message d'erreur
Uncaught ReferenceError: CHANGEEDIT is not defined

J'ai trouvé un contournement qui ne me satisfait guère
En tête de yy.js j'écris
try {
	var EDITFLAG = CHANGEEDIT;
}
catch(error) {
	var EDITFLAG = false;
}

et dans le corps de ce fichier je teste if(EDITFLAG) chaque fois que je veux savoir si je peux ou non accéder à une fonction définie dans xx.js

Existe-t-il une solution moins lourde à ce problème ?
Merci de votre aide.
Modifié par PapyJP (16 Feb 2026 - 10:11)
Modérateur
Bonjour,

Voici un test avec

var, let, const et Class testés avec typeOf et window.hasOwnProperty() pour voir ce que l'on trouve selon q'une variable est déclarée, définie ou pas.

Bizarrement , dans le codepen typeOf ne lève pas d'erreurs dans chrome : Version 145.0.7632.76 (Build officiel) (64 bits) mais bon, c'est un codepen.

https://codepen.io/gc-nomade/pen/GgqaKRN?editors=1011

Cdt
Modifié par gcyrillus (16 Feb 2026 - 11:42)
Bonsoir Papy,

Durant des années j'ai utilisé la même approche que toi, notamment pour appeler les variables de bibliothèques sur lesquelles je n'avais pas la main :
/**
 * Test la présence de la bibliothèque Leaflet.js chargée en asynchrone et, si oui, exécution du script de configuration.
 * @param {object} L est une variable globale produite par Leaflet, elle nous permettra de tester l'initialisation de la bibliothèque.
 * @note typeof permet de tester la variable sans que celle-ci produise une erreur si elle n'est pas définie.
 */
window.addEventListener('load', () => {
  if (typeof L !== 'undefined') maps()

  document.addEventListener('readystatechange', () => {
    if (document.readyState === 'complete' && typeof L !== 'undefined') maps()
  })
})

Mais par la suite, depuis deux ou trois ans, j'utilise quelque chose de beaucoup plus fiable, à savoir : les mutations observers. Désormais je fais quelque chose comme ceci :
function initializeMaps(callback) {
  if (window.L) {
    callback()
    return true
  }
  return false
}

if (!initializeMaps(maps)) {
  const observer = new MutationObserver(() => {
    if (initializeMaps(maps)) {
      observer.disconnect()
    }
  })

  // Observer uniquement le head
  observer.observe(document.head, { childList: true, subtree: true })

  // Arrêter l'observation après 10 secondes
  setTimeout(() => observer.disconnect(), 10000)
}

Malheureusement je n'ai pas documenté le pourquoi de mon passage de la première à la deuxième solution, je ne me souviens plus ce que cela résout exactement. J'ai d'autant plus de mal à me rappeler que j'ai arrêté de faire du web depuis quelques temps maintenant (j'y reviendrais peut-être, mais pas dans l’immédiat)...
Modifié par Olivier C (18 Feb 2026 - 20:46)