Maison > Article > interface Web > Comment utiliser l'iframe en HTML ?
Comment utiliser l'iframe en HTML ?
- 青灯夜游original
- 2018-09-13 16:14:302201parcourir
Ce chapitre vous présentera comment utiliser iframe en html, afin que tout le monde puisse comprendre l'utilisation d'iframe en html. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Certaines personnes disent que l'iframe est l'élément qui consomme le plus d'énergie et doit être utilisé le moins possible ; d'autres disent que l'iframe n'est pas très sécurisé et doit être utilisé le moins 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 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.
Largeur : 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 en fonction des éléments environnants. (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 à part entière
Le 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>Toutes les parties interactives sont également écrites dans cette page, et l'iframe sera automatiquement transférée vers la page importée.
Alors, comment faire entrer 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. Il peut être obtenu dans l'URL (c'est-à-dire dans le fichier HTML introduit). )
Avantages et inconvénients de l'iframe
Avantages :
La page ne se recharge pas Si vous devez recharger la page entière, il vous suffit de recharger une page cadre dans la page (réduire la transmission des données et réduire le temps de chargement de la page web)
La technologie est simple et facile à utiliser, et est principalement utilisé pour les recherches qui ne nécessitent pas de moteur de recherche
Il est pratique pour le développement et réduit le taux de duplication du code (comme l'en-tête et le pied de page
Inconvénients :
Générera beaucoup de La page n'est pas facile à gérer Elle n'est pas facile à imprimer Multi-frame ; les pages augmenteront les requêtes HTTP du service Le bouton retour du navigateur est invalide, etc.;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!