Comment utiliser l'iframe en HTML ?
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
Tous les principaux navigateurs prennent en charge la balise
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
Largeur : Spécifie la largeur de
Hauteur : Spécifie la hauteur de
src : Spécifie l'URL du document affiché dans
frameborder : Spécifie s'il faut afficher la bordure autour de
align : Spécifie comment aligner
défilement : Spécifie s'il faut afficher les barres de défilement dans
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
