Comment utiliser la balise HTML <iframe> ? 4 façons simples d'ajuster la hauteur des balises HTML <iframe>-tutoriel HTML-php.cn

Maison > interface Web > tutoriel HTML > Comment utiliser la balise HTML

HTML Qu'est-ce que la balise :

Un cadre en ligne est utilisé pour intégrer un autre document dans le document HTML actuel.

HTML Comment utiliser la balise : La balise

crée un cadre en ligne qui contient un autre document, convertissant ainsi une autre page HTML. dans la page actuelle. Veuillez vous référer à l'exemple suivant :

Marquer un cadre en ligne :

<iframe src="//www.w3cschool.cn"></iframe>

Copier après la connexion

Attribut de balise HTML : </strong><br/></p><p><img src="https://img.php.cn//upload/image/659/725/380/1534387766737325.png" title="1534387766737325.png" alt="Comment utiliser la balise HTML <iframe> ? 4 façons simples dajuster la hauteur des balises HTML <iframe>"/></p><p><strong>Utilisation de base des balises HTML<iframe> : </strong></p><p>Scénarios d'utilisation : La plupart des pages sont identiques, mais quelques-unes sont différentes. Par exemple, dans le système, le left_nav et le contenu supérieur de chaque page sont cohérents, mais le contenu en bas à droite change. </p><p> Avantages : Améliorez le taux de réutilisation du code de la page et rendez-nous paresseux. </p><p>Inconvénients : L'adresse URL de la page n'a pas changé. </p><p><strong>3 méthodes d'adaptation de la hauteur de l'iframe : </strong></p><p>le contenu de l'iframe est inconnu et hautement prévisible</p><p>À l'heure actuelle, nous pouvons y ajouter une valeur par défaut. Valeur CSS min-height, puis utilisez simultanément JavaScript pour modifier la hauteur. Les codes de compatibilité couramment utilisés sont : </p><p>1 (Si différents sous-domaines échangent des informations sous le même nom de domaine de premier niveau, définissez document.domain="caibaojian.com")</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">// document.domain = "caibaojian.com"; function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; }} }; window.onload = function () { setIframeHeight(document.getElementById(&#39;external-frame&#39;)); };</pre><div class="contentsignin">Copier après la connexion</div></div><p>2. . Appelez pour l'ID iframe connu : <br/></p><p> Modifiez simplement l'ID iframe ci-dessus. Ou vous pouvez écrire le code directement dans l'iframe. Afin de ne pas polluer le code HTML, nous recommandons généralement d'utiliser le code ci-dessus. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe></pre><div class="contentsignin">Copier après la connexion</div></div><p>3. La hauteur de l'iframe s'adapte lorsque la largeur du contenu change : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) }</pre><div class="contentsignin">Copier après la connexion</div></div><p>4. Ouvrez la fenêtre d'exécution du débogage et vous pouvez voir l'opération : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe> <script type="text/javascript"> function reinitIframe(){ var iframe = document.getElementById("test"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; console.log(height); }catch (ex){} } window.setInterval("reinitIframe()", 200); </script></pre><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Barre d'invite : </strong></p> <p>Conseils : Vous pouvez placer le texte requis entre <iframe> et , afin de pouvoir gérer les navigateurs qui ne prennent pas en charge

Conseil : utilisez CSS pour styliser (y compris les barres de défilement).

Astuce : La balise est principalement utilisée pour les parties communes à plusieurs pages Web, telles que les barres de navigation, les colonnes publicitaires, etc.

Différences entre HTML 4.01 et HTML5 :

HTML5 ajoute de nouveaux attributs et supprime certains attributs dans HTML 4.01.

Différences entre HTML et XHTML :

En XHTML, l'attribut name est obsolète et sera supprimé. Veuillez plutôt utiliser l'attribut id.

[Recommandations associées]

Quels sont les nouveaux éléments structurels en HTML5 ? Utilisation de nouveaux éléments structurels en HTML5 (recommandé)

Qu'est-ce que la balise article en HTML5 ? Où l’élément article est-il utilisé en HTML5 ?

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!

Étiquettes associées：
HTML<iframe>标签 HTML<iframe>标签四种自适应高度的方法

source：php.cn

Article précédent：Quelle est l’utilisation spécifique de la balise HTML
? Comment définir la couleur de la bordure à l'aide de Fieldset ? Article suivant：Quels sont les attributs de HTML

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Que peut faire le framework React ? Introduction détaillée au framework React (avec des exemples d'utilisation complets)

2018-09-11 16:45:17

Comment créer une application en utilisant React ? Détails des étapes pour créer des applications à grande échelle avec React+Redux

2018-09-11 16:39:07

Comment implémenter la connexion dans React ? Explication détaillée du module de connexion React

2018-09-11 16:29:40

Comment utiliser React ? Explication détaillée de l'utilisation de React (avec exemples inclus)

2018-09-11 16:10:13

Quelles sont les nouveautés de React 16 ? Introduction aux nouvelles fonctionnalités et fonctions de React16

2018-09-11 16:05:55

Quelles connaissances dois-je acquérir sur React ? Résumé des points de connaissance de réaction (avec des exemples complets)

2018-09-11 16:01:50

Quelles sont les fonctions de réagir ? Analyse détaillée de la fonction de réaction (avec exemples)

2018-09-11 15:55:13

Quel est le cycle de vie de Reactjs ? Introduction détaillée au cycle de vie de Reactjs

2018-09-11 15:50:18

Comment utiliser React.js ? Introduction à l'utilisation simple de React.js (avec exemples)

2018-09-11 15:43:40

Quelles sont les utilisations des références de composants React ? Explication détaillée du rôle des références de composants de réaction et de son utilisation

2018-09-11 15:34:44

Derniers numéros

Pourquoi ma balise hr est-elle translucide lorsqu'elle est définie sur une couleur blanche unie ? J'ai un HTML (avec bootstrap) et un CSS, dans mon HTML j'ai une balise <hr> qui a un...

Depuis 2024-04-06 16:13:26

0

1

500

Quelle est la différence entre les balises HTML <a></a> et <a href=""></a> ? Certains sites Web utilisent l'[url]adresse du site Web[/url] dans leur zone de texte et n...

Depuis 2024-04-02 22:46:16

0

2

403

Je rencontre des problèmes avec le formatage de la sortie lors de l'utilisation des balises <br> en HTML J'ai du mal avec les questions pratiques. Vous pouvez donc voir que j'ai tout, du HTML au ...

Depuis 2024-04-02 15:56:11

0

1

315

Utiliser regex pour remplacer le HTML dans div et ajouter un espacement Bonjour, j'aimerais de l'aide pour créer une expression régulière qui remplace toutes les ...

Depuis 2024-04-02 11:28:02

0

1

420

Intégration de HTML généré par une fonction R Je veux créer dynamiquement du HTML et restituer ce HTML en quarto. L'application réelle i...

Depuis 2024-04-01 20:51:51

0

1

367

Rubriques connexes
Plus>

Comment configurer un nom de domaine automatiquement redirigé

erreur MySQL 10060

Quel est le code espace en HTML

Méthode de récupération de base de données Oracle

winkawaksrom

Que faire si le CSS ne peut pas être chargé

Jusqu'où ira Ethereum ?

Comment utiliser la fonction jsreplace

Recommandations populaires

Que signifie l'URL ?

Que signifie DOM ?

Comment changer la taille de l'image

Comment mettre la police en gras en HTML

Comment définir la taille des images HTML

Tutoriels populaires
Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

1424830

Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

4271131

Tutoriel vidéo JAVA pour débutants

2551148

Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

508403

Tutoriel d'introduction PHP base zéro

863938

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

1424830 temps d'étude

Tutoriel vidéo JAVA pour débutants

2551148 temps d'étude

Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

508403 temps d'étude

Introduction rapide au développement web front-end

216011 temps d'étude

Maîtrisez les didacticiels vidéo PS à partir de zéro

893548 temps d'étude

[Web front-end] Démarrage rapide de Node.js

7734 temps d'étude

Collection complète de cours full-stack de développement Web étranger

6193 temps d'étude

Aller au langage pratique GraphQL

5100 temps d'étude

Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

706 temps d'étude

Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

25828 temps d'étude

Derniers téléchargements
Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

[bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery

[Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3

[Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5

[bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery

[Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS

[effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique

[Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image

[Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure

[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches

[Modèle frontal] Modèle Web de CV de travail créatif de concepteur

[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne

[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs

[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne

[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet

[Modèle frontal] Modèle de site Web de service de trading de devises de style violet

[Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)

[Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)

[image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)

[Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)

[Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)

[Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes

[image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)

[Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)

[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure

[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches

[Modèle frontal] Modèle Web de CV de travail créatif de concepteur

[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne

[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs

[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne

[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet

[Modèle frontal] Modèle de site Web de service de trading de devises de style violet