Cette fois, je vais vous apporter l'initialisation du nœud iframe. Quelles sont les précautions pour l'initialisation du nœud iframe. Voici un cas pratique, jetons un coup d'œil.
Aujourd'hui, j'ai eu soudain envie de revoir les principes de production de l'éditeur de texte enrichi . J’ai donc commencé à le faire étape par étape sans dire un mot. Parce que j'ai écrit un simple éditeur de texte enrichi il y a un an, j'ai probablement encore quelques impressions. Mais lorsque j'ai exécuté le code que j'ai écrit, j'ai trouvé un problème :
var ifr = document.createElement('iframe');
ifr.width = 300;
ifr.height = 300;
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:0px; }</style></head><body></body></html>');
document.body.appendChild(ifr);Copier après la connexion
Copier après la connexion
Regardez le code ci-dessus, avez-vous trouvé des erreurs ?
Je pense que s’il n’y a pas d’enfants qui ont vécu des expériences similaires aux miennes, ils ne pourront probablement pas voir ce qui ne va pas avec ce code. Alors autant aller courir, peut-être que vous découvrirez bientôt le problème.
Permettez-moi de vous révéler la réponse ci-dessous :
Ce code lancera une exception d'objet introuvable. Quel objet est introuvable ? L'objet document est introuvable, quoi ? Comment est-il possible que l'objet document soit introuvable ? Bien entendu, cet objet document est l’objet document de l’iframe. Quiconque a créé du texte enrichi sait que vous devez d'abord obtenir l'objet document de l'iframe avant de le rendre modifiable. Mais pourquoi ne pouvons-nous pas obtenir l'objet document ? Je ne serai pas trop prétentieux ici. Laissez-moi parler de mon processus de solution.
Tout d’abord, je suis allé sur Google et j’ai constaté que la façon dont j’avais obtenu le document était correcte. Ensuite, je me suis demandé si c'était Chrome ? Chrome ne prend-il pas en charge ces deux objets ? Je suis donc passé à Firefox. Le résultat est toujours le même. Alors ce qui est sûr, c'est que cela doit être un problème avec votre propre code.
Plus tard, en comparant le code sur Internet, j'ai trouvé que la position de mon appendChild était un peu fausse, je l'ai donc déplacé en avance pour obtenir l'objet document :
Aujourd'hui, je J'ai soudainement eu envie de revoir le principe de production de texte enrichi. Alors j’ai commencé à le faire étape par étape sans dire un mot. Parce que j'ai écrit un simple éditeur de texte enrichi il y a un an, j'ai probablement encore quelques impressions. Mais lorsque j'ai exécuté le code que j'ai écrit, j'ai trouvé un problème :
var ifr = document.createElement('iframe');
ifr.width = 300;
ifr.height = 300;
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:0px; }</style></head><body></body></html>');
document.body.appendChild(ifr);Copier après la connexion
Copier après la connexion
Regardez le code ci-dessus, avez-vous trouvé des erreurs ?
Je pense que s’il n’y a pas d’enfants qui ont vécu des expériences similaires aux miennes, ils ne pourront probablement pas voir ce qui ne va pas avec ce code. Alors autant aller courir, peut-être que vous découvrirez bientôt le problème.
Permettez-moi de vous révéler la réponse ci-dessous :
Ce code lancera une exception d'objet introuvable. Quel objet est introuvable ? L'objet document est introuvable, quoi ? Comment est-il possible que l'objet document soit introuvable ? Bien entendu, cet objet document est l’objet document de l’iframe. Quiconque a créé du texte enrichi sait que vous devez d'abord obtenir l'objet document de l'iframe avant de le rendre modifiable. Mais pourquoi ne pouvons-nous pas obtenir l'objet document ? Je ne serai pas trop prétentieux ici. Laissez-moi parler de mon processus de solution.
Tout d'abord, je suis allé sur Google et j'ai constaté que la façon dont j'avais obtenu le document était correcte. Ensuite, je me suis demandé si c'était Chrome ? Chrome ne prend-il pas en charge ces deux objets ? Je suis donc passé à Firefox. Le résultat est toujours le même. Alors ce qui est sûr, c'est que cela doit être un problème avec votre propre code.
Plus tard, en comparant les codes sur Internet, j'ai trouvé que la position de mon appendChild était un peu fausse, je l'ai donc déplacé en avance avant d'obtenir l'objet document :
var ifr = document.createElement('iframe');
ifr.width = 300;
ifr.height = 300;
document.body.appendChild(ifr);
var idoc = ifr.contentDocument || ifr.contentWindow.document;
idoc.designMode = 'on';
idoc.contentEditable = true;
idoc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body></body></html>');Copier après la connexion
Résultat : tout s'est bien passé. Ensuite, j'ai analysé l'erreur cette fois. En fait, la raison de cette erreur est très simple. Tout le monde sait qu'une iframe contient en fait un autre document, et ce document ne peut avoir un objet document qu'après son initialisation. Et si l'élément iframe n'est pas ajouté à l'arborescence DOM, le document dans l'iframe ne sera pas initialisé. Par conséquent, dans notre code au début, la valeur contentDocument dans la variable ifr que nous avons obtenue est nulle, ce qui signifie que le document dans l'iframe n'a pas été initialisé pour le moment.
En suivant cette ligne, j'ai vérifié l'état d'initialisation des autres nœuds et j'ai découvert qu'en fait, une fois que d'autres nœuds d'éléments seront créés, ils auront leurs propres attributs et méthode . En d’autres termes, iframe est une valeur aberrante parmi de nombreux nœuds d’éléments.
Tout s'est bien passé. Ensuite, j'ai analysé l'erreur cette fois. En fait, la raison de cette erreur est très simple. Tout le monde sait qu'une iframe contient en fait un autre document, et ce document ne peut avoir un objet document qu'après son initialisation. Et si l'élément iframe n'est pas ajouté à l'arborescence DOM, le document dans l'iframe ne sera pas initialisé. Par conséquent, dans notre code au début, la valeur contentDocument dans la variable ifr que nous avons obtenue est nulle, ce qui signifie que le document dans l'iframe n'a pas été initialisé pour le moment.
En suivant cette ligne, j'ai vérifié l'état d'initialisation des autres nœuds et j'ai constaté qu'en fait, une fois que d'autres nœuds d'éléments seront créés, ils auront leurs propres attributs et méthodes, qu'ils soient ajoutés à l'arborescence DOM ou pas. En d’autres termes, iframe est une valeur aberrante parmi de nombreux nœuds d’éléments.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Quelles sont les différences entre l'écriture HTML standard et le code généré par Dreamweaver
Comment utiliser iframe pour intégrer d'autres pages Web dans la page Web actuelle
Comment ajouter des fichiers au format vidéo flash (flv, swf) en html
Comment résoudre l'espacement des étiquettes et des entrées problème dans Google Chrome
Comment implémenter la redirection d'actualisation à l'aide de la balise d'en-tête HTML méta
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
