Maison >interface Web >tutoriel HTML >Iframe en HTML

Iframe en HTML

WBOYoriginal: 2024-09-04 16:41:33570parcourir

Les Iframes en HTML ne sont rien d'autre que des cadres en ligne utilisés comme document HTML pour y ajouter un autre document HTML. Il est principalement utilisé dans les pages Web ou les processus de développement Web pour inclure d'autres contenus via une autre source, comme des publicités sur cette page Web.

La plupart des concepteurs de sites Web utilisent Iframe pour présenter des applications interactives sur le site Web ou les pages Web. Cela est rendu possible grâce à JavaScript ou à l'attribut target en HTML.

Le but principal d'un Iframe est d'afficher une page Web dans une autre. Le cadre en ligne doit être affiché à l'aide d'une balise appelée . Cela fonctionne comme un bloc rectangulaire sur votre page Web où le navigateur peut afficher un autre document avec des barres de défilement et des bordures.</p> <p><strong>Syntaxe</strong></p> <ul> <li>Nous allons maintenant voir comment exactement Iframe va utiliser :</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL"></iframe></pre> <ul> <li>Ici <iframe> est une balise où les iframes HTML seront définies. Les attributs Src utilisés pour définir l'URL de la page du cadre en ligne seront inclus.</li> </ul> <p><strong>Exemple :</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" ></iframe></pre> <ul> <li>Il est également possible de donner une hauteur et une largeur spécifiques à notre Iframe au format pixels comme suit :</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" height="value" width="value"></iframe></pre> <ul> <li>Dans la syntaxe ci-dessus, tout se passera de la même manière ; de plus, nous pouvons spécifier la hauteur et la largeur au format pixels, en les définissant comme</li> </ul> <p><strong>Exemple :</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" height="300" width="300"></iframe></pre> <ul> <li>Une autre méthode pour définir la hauteur et la largeur de l'iframe en utilisant des valeurs via CSS est présentée dans la syntaxe ci-dessous :</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe></pre> <ul> <li>Toutes les choses sont les mêmes que ci-dessus, il suffit de modifier la spécification des valeurs.</li> </ul> <p><strong>Exemple :</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe></pre> <ul> <li>Une autre fonctionnalité ajoutée à l'iframe est que nous pouvons supprimer les bordures déjà définies du cadre en utilisant la propriété border none. La syntaxe pour cela est la suivante :</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="border : none;"></iframe></pre> <ul> <li>Avec l'aide de CSS, il est également possible de faire beaucoup de choses avec la bordure, comme changer sa taille, appliquer de la couleur à la bordure, etc.</li> </ul> <p>L'iframe peut être utilisée comme cible pour un lien en utilisant la syntaxe :</p> <pre class="brush:php;toolbar:false"><iframe src ="URL" name="iframe_a"></iframe></pre> <ul> <li>Dans la syntaxe ci-dessus, src est notre URL normale ; ici, l'attribut target du lien fera référence à l'attribut name dans notre balise iframe.</li> </ul> <p><strong>Exemple :</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" name="iframe_a"></iframe></pre> <h3>Attribut de balise Iframe</h3> <p>Il existe différentes balises d'attribut utilisées dans les Iframes. Ce sont les suivants :</p> <ul> <li> <strong>Src :</strong> Cet attribut est utilisé pour insérer un fichier qui doit être inclus dans le cadre. L'URL spécifie la page Web cible à charger dans une iframe.</li> <li> <strong>Nom :</strong> Le nom est un attribut utilisé pour donner un nom d'identification au cadre. C'est particulièrement utile lorsque vous créez un lien pour ouvrir une autre page Web.</li> <li> <strong>allowfullscreen :</strong> Cet attribut vous permet d'afficher votre cadre au format pleine largeur. Nous devons donc définir la valeur true pour qu'elle arrive à cette fonction.</li> <li> <strong>Frameborder :</strong> Il s'agit d'un attribut utile qui vous permet d'afficher ou non une bordure sur le cadre. La valeur 1 consiste à afficher la bordure et 0 à ne pas afficher la bordure du cadre.</li> <li> <strong>Marginwidth :</strong> Vous permet de définir l'espace entre les côtés gauche et droit du cadre.</li> <li> <strong>Marginheight :</strong> Cela vous permet de définir l'espace entre le haut et le bas du cadre.</li> <li> <strong>Défilement :</strong> Ces attributs contrôlent si la barre de défilement s'affichera ou non dans le cadre. Les valeurs incluses sont « oui », « non » ou « auto ».</li> <li> <strong>Hauteur :</strong> Il permet de définir la hauteur du cadre. Que ce soit en % ou en pixels</li> <li> <strong>Largeur :</strong> Il permet de définir la largeur du cadre. Que ce soit en % ou en pixels</li> <li> <strong>Longdesc :</strong> À l'aide de cet attribut, vous pouvez lier une autre page avec une longue description du contenu de votre cadre.</li> </ul> <h3>Exemples d'Iframes en HTML</h3> <p>Voici quelques exemples d'Iframes en HTML, qui sont expliqués ci-dessous :</p> <h4>Exemple n°1</h4> <p>Prenons un exemple dans lequel nous montrerons comment créer un iframe avec une hauteur et une largeur spécifiques.</p> <p><strong>Code :</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html></pre> <p><strong>Sortie :</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929564512.png" alt="Iframe en HTML" ></p> <h4>Exemple n°2</h4> <p>Prenons un autre exemple dans lequel nous montrerons comment créer un iframe avec une hauteur et une largeur spécifiques. Mais dans cet exemple, nous spécifions la hauteur et la largeur via CSS. Ici, nous pouvons voir que la barre de défilement est ajustée en fonction de la taille du contenu.</p> <p><strong>Code :</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html></pre> <p><strong>Sortie :</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929679257.png" alt="Iframe en HTML" ></p> <h4>Example #3</h4> <p>Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.</p> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929856656.png" alt="Iframe en HTML" ></p> <h4>Example #4</h4> <p>Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.</p> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543930011003.png" alt="Iframe en HTML" ></p> <p><strong>Target Output:</strong></p> <p>As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543930273563.png" alt="Iframe en HTML" ></p> <h3>Conclusion</h3> <p>An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.</p><p>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!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">format</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">auto</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">Event</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">border</a> <a href="javascript:void(0);">iframe</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Décoration de texte HTML" href="https://m.php.cn/fr/faq/1796600197.html">Décoration de texte HTML</a></span><span>Article suivant：<a class="dBlack" title="Décoration de texte HTML" href="https://m.php.cn/fr/faq/1796600200.html">Décoration de texte HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>