Maison > Article > interface Web > Comment utiliser l'iframe
iframe est un cadre en ligne qui peut intégrer un autre document dans la page HTML actuelle. Généralement, vous pouvez utiliser iframe pour intégrer directement la balise iframe dans la page et spécifier src.
Certaines personnes disent que l'iframe est l'élément qui consomme le plus d'énergie et qu'il doit être utilisé le moins possible. Certaines personnes disent également que la sécurité des iframes est trop mauvaise et que leur utilisation devrait être réduite autant que possible. Même si ce qu’ils disent est vrai, la puissance des iframes ne peut être ignorée, et les entreprises qui l’utilisent ne manquent pas actuellement. La balise
d5ba1642137c3f32f4f4493ae923989c
spécifie un cadre en ligne. Un cadre en ligne est utilisé pour intégrer un autre document dans le document HTML actuel.
Tous les principaux navigateurs prennent en charge la balise d5ba1642137c3f32f4f4493ae923989c Vous pouvez placer le texte d'invite entre d5ba1642137c3f32f4f4493ae923989c et 065276f04003e4622c4fe6b64f465b88, de sorte que les navigateurs qui ne prennent pas en charge d5ba1642137c3f32f4f4493ae923989c
Comment utiliser l'iframe ?
Habituellement, nous utilisons iframe pour intégrer directement le src spécifié par la balise iframe sur la page.
Par exemple :
<!-- <iframe> 标签规定一个内联框架 这里写p 标签是为了看align的效果 --> <p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。 <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no"> <p>你的浏览器不支持iframe标签</p> </iframe> 这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>
Attributs communs de l'iframe :
name : Spécifie le nom de d5ba1642137c3f32f4f4493ae923989c.
width : Spécifie la largeur de d5ba1642137c3f32f4f4493ae923989c.
hauteur : Spécifie la hauteur de d5ba1642137c3f32f4f4493ae923989c.
src : Spécifie l'URL du document affiché dans d5ba1642137c3f32f4f4493ae923989c.
frameborder : Spécifie s'il faut afficher la bordure autour de d5ba1642137c3f32f4f4493ae923989c. (0 signifie pas de bordure, 1 bit a une bordure).
align : Spécifie comment aligner d5ba1642137c3f32f4f4493ae923989c (gauche, droite, haut, milieu, bas).
défilement : Spécifie s'il faut afficher les barres de défilement dans d5ba1642137c3f32f4f4493ae923989c. (oui, non, auto)
L'attribut src de l'iframe dans le code ci-dessus est une page html locale
Le code est le suivant :
<body> <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div></body><script> var div = document.getElementById("div"); console.log(div);</script>
Oui Les parties interactives sont également écrites dans cette page, et l'iframe sera automatiquement transférée vers la page importée.
Comment récupérer le contenu dans l'iframe ?
var iframe = document.getElementById("myrame"); //获取iframe标签 var iwindow = iframe.contentWindow; //获取iframe的window对象 var idoc = iwindow.document; //获取iframe的document对象 console.log(idoc.documentElement); //获取iframe的html console.log("body",idoc.body);
Cependant, le DOM à l'intérieur ne peut pas être obtenu à partir de l'URL (c'est-à-dire le fichier html importé)
Avantages et inconvénients de l'iframe
Avantages :
Lors du rechargement de la page, vous n'avez pas besoin de recharger la page entière, mais seulement de recharger une page de cadre dans la page (réduire transmission de données, réduire le temps de chargement de la page Web);
La technologie est simple et facile à utiliser, et elle est principalement utilisée pour les pages qui ne nécessitent pas de moteurs de recherche pour rechercher
Il est pratique pour le développement et réduit le taux de duplication du code (comme l'en-tête de la page, le pied de page
Inconvénients :
générera beaucoup de pages) ; , ce qui n'est pas facile à gérer ;
n'est pas facile à imprimer
Plusieurs cadres La page augmentera le service et fera des requêtes HTTP
Le bouton retour du navigateur est ; invalide, etc.;
En raison de nombreuses lacunes, elle n'est pas conforme au concept de conception Web standard et a été abandonnée. La balise HTML5 actuelle n'est plus prise en charge.
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!