Beaucoup de gens ont toujours eu l’idée que ce serait formidable s’ils pouvaient utiliser les iframes à leur guise. De cette façon, les pages statiques ont la capacité d’implémenter une mise en page multipage unifiée équivalente à inclure et exiger en arrière-plan des pages dynamiques php, jsp et asp.
Avec l'aide de Javascript, nous pouvons charger dynamiquement le contenu de la page html pointée par l'attribut d'objet iframe src comme un arrière-plan. Une telle opération nécessite de fournir deux pages, une page est la page où se trouve l'iframe ( nom de la page : iPage.html ) et l'autre page est la page pointée par l'attribut iframe src ( nom de la page : srcPage.html ).
iPage.html, dom dans <body> :
,<body>in
Discutons de la façon d'utiliser les deux pages ci-dessus avec JS sous IE, puis discutez de la méthode de Firefox, et enfin donnez la compatibilité avec IE et Firefox La méthode du navigateur pour faire fonctionner l'objet iframe.
Tout le monde sait qu'iframe est une balise HTML non standard. Il s'agit d'une balise multi-mise en page lancée par le navigateur IE. Plus tard, Mozilla a également pris en charge cette balise. (Gossip, hehe)
1. IE l'obtient via document.frames["IframeName"]. Exemple : nous affichons le contenu de h1 dans srcPage.html dans iPage.html. Le JS est le suivant :
Vous constaterez que l'ajout de code à la page ne semble pas produire les éléments souhaités. Pourquoi ? Je n'ai pas encore compris cela. J'ajoute simplement window.onload et la sortie apparaîtra (Remarque : le code JS est écrit dans cet événement. Quelqu'un qui le connaît peut-il me le dire ? Pourquoi ? Après le changement, le code est affiché sous IE, mais document.frames n'est pas défini sous Firefox Message d'erreur :
c'est-à-dire qu'une autre façon est contentWindow de l'obtenir, code :
Cette méthode a réussi les tests de ie6, ie7, firefox2.0 et firefox3.0. hé-hé. (Après vérification en ligne, j'ai trouvé une vulnérabilité de dépassement de tampon dans Mozilla Firefox iframe.contentWindow.focus, qui présente un risque d'attaques par injection de script.
Plus tard, j'ai entendu dire que cela pouvait être évité en arrière-plan, et j'ai été soulagé. Cependant, j'ai toujours j'espère que la nouvelle version de Firefox pourra le résoudre. Un
tel
y accéder via contentWindow Les nœuds sont les mêmes qu'avant.
Mozilla prend en charge la norme W3C pour accéder à l'objet document d'une iframe via IFrameElmRef.contentDocument . Grâce à la norme, vous pouvez écrire un document en moins, code :
Une méthode compatible avec ces deux navigateurs est désormais disponible, qui consiste à utiliser la méthode contentWindow.
hé-hé ! Puis-je utiliser l'iframe comme je le souhaite ? Si vous vous sentez toujours mal à l'aise, vous pouvez même réécrire le contenu dans l'iframe.
Grâce à designMode (définissant le document en mode de conception modifiable) et contentEditable (définissant le contenu comme modifiable), vous pouvez réécrire le contenu dans l'iframe. Code :
Pour plus d'informations sur ces deux objets, veuillez vous référer à : http://msdn.microsoft.com/en-. us/ library/ms533720(VS.85).aspx
firebug teste les performances du code ci-dessus, comme le montre la figure
Commentez iObj.document.designMode = 'On';
iObj.document.contentEditable = true
comme indiqué :
L'effet n'a pas changé et l'efficacité du temps est près de trois fois supérieure à celle d'avant l'annotation. hé-hé. Ces deux objets font référence aux méthodes d'écriture de certaines personnes sur Internet pour réécrire le contenu de l'iframe. En fait, il n'est pas nécessaire d'utiliser designMode et contentEditable sauf en cas d'autres besoins.
Avec les principes ci-dessus, il est assez simple de mettre en œuvre cela, il suffit de définir la valeur de hauteur de l'iframe sur la valeur de hauteur du document qu'il contient. Code
à cause de ce terme technique du Web, hé, puant !
Documents de référence :
https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla
http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx