Heim > Artikel > Web-Frontend > Iframes in HTML

Iframes in HTML

WBOYOriginal: 2024-09-04 16:41:33545Durchsuche

Iframes in HTML sind nichts anderes als Inline-Frames, die als HTML-Dokument verwendet werden, um ein weiteres HTML-Dokument hinzuzufügen. Es wird hauptsächlich in Webseiten oder Webentwicklungsprozessen verwendet, um andere Inhalte über eine andere Quelle einzubinden, beispielsweise Werbung auf dieser Webseite.

Die meisten Webdesigner verwenden Iframe, um interaktive Anwendungen auf der Website oder Webseiten zu präsentieren. Dies wird durch die Verwendung von JavaScript oder dem Zielattribut in HTML ermöglicht.

Der Hauptzweck eines Iframes besteht darin, eine Webseite innerhalb einer anderen anzuzeigen. Der Inline-Frame sollte mit einem Tag namens angezeigt werden. Es funktioniert wie ein rechteckiger Block auf Ihrer Webseite, in dem der Browser ein anderes Dokument mit Bildlaufleisten und Rändern anzeigen kann.</p> <p><strong>Syntax</strong></p> <ul> <li>Jetzt werden wir sehen, wie genau Iframe verwendet wird:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL"></iframe></pre> <ul> <li>Hier <iframe> ist ein Tag, in dem HTML-Iframes definiert werden. Src-Attribute, die zum Definieren der URL der Inline-Frame-Seite verwendet werden, werden einbezogen.</li> </ul> <p><strong>Beispiel:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" ></iframe></pre> <ul> <li>Es ist auch möglich, unserem Iframe wie folgt eine bestimmte Höhe und Breite im Pixelformat zuzuweisen:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" height="value" width="value"></iframe></pre> <ul> <li>In der obigen Syntax werden alle Dinge gleich sein; Darüber hinaus können wir Höhe und Breite im Pixelformat angeben und sie als </li> definieren </ul> <p><strong>Beispiel:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" height="300" width="300"></iframe></pre> <ul> <li>Eine weitere Methode zum Definieren der Höhe und Breite des Iframes mithilfe von Werten über CSS ist in der folgenden Syntax dargestellt:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe></pre> <ul> <li>Alle Dinge sind die gleichen wie oben, nur mit einer Änderung bei der Angabe von Werten.</li> </ul> <p><strong>Beispiel:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe></pre> <ul> <li>Eine weitere Funktion, die dem Iframe hinzugefügt wird, besteht darin, dass wir bereits definierte Rahmen für den Frame entfernen können, indem wir die Eigenschaft „border none“ verwenden. Die Syntax hierfür lautet wie folgt:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="border : none;"></iframe></pre> <ul> <li>Mit Hilfe von CSS ist es auch möglich, viele Dinge mit dem Rahmen zu tun, z. B. seine Größe zu ändern, etwas Farbe auf den Rahmen anzuwenden usw.</li> </ul> <p>Der Iframe kann als Ziel für einen Link verwendet werden, indem die Syntax verwendet wird:</p> <pre class="brush:php;toolbar:false"><iframe src ="URL" name="iframe_a"></iframe></pre> <ul> <li>In der obigen Syntax ist src unsere normale URL; Hier verweist das Zielattribut des Links auf das Namensattribut in unserem Iframe-Tag.</li> </ul> <p><strong>Beispiel:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" name="iframe_a"></iframe></pre> <h3>Iframes-Tag-Attribut</h3> <p>In Iframes werden verschiedene Attribut-Tags verwendet. Diese lauten wie folgt:</p> <ul> <li> <strong>Src:</strong> Dieses Attribut wird verwendet, um eine Datei einzufügen, die in den Frame eingefügt werden muss. Die URL gibt die Zielwebseite an, die innerhalb eines Iframes geladen werden soll.</li> <li> <strong>Name:</strong> Name ist ein Attribut, das verwendet wird, um dem Rahmen einen Identifikationsnamen zu geben. Dies ist am nützlichsten, wenn Sie einen Link erstellen, um eine andere Webseite zu öffnen.</li> <li> <strong>allowfullscreen:</strong> Mit diesem Attribut können Sie Ihren Rahmen im Vollbildformat anzeigen. Wir müssen also den Wert auf „true“ setzen, damit diese Funktion ausgeführt wird.</li> <li> <strong>Frameborder:</strong> Dies ist ein hilfreiches Attribut, mit dem Sie einen Rahmen anzeigen oder nicht anzeigen können. Wert 1 soll den Rand anzeigen und 0 soll den Rand zum Rahmen nicht anzeigen.</li> <li> <strong>Randbreite:</strong> Ermöglicht Ihnen, den Abstand zwischen der linken und rechten Seite des Rahmens zu definieren.</li> <li> <strong>Randhöhe:</strong> Damit können Sie den Abstand zwischen der Ober- und Unterseite des Rahmens definieren.</li> <li> <strong>Scrollen:</strong> Diese Attribute steuern, ob die Bildlaufleiste im Frame angezeigt wird oder nicht. Die enthaltenen Werte sind „Ja“, „Nein“ oder „Auto“.</li> <li> <strong>Höhe:</strong> Wird verwendet, um die Höhe des Rahmens zu definieren. Ob in % oder Pixel</li> <li> <strong>Breite:</strong> Wird verwendet, um die Breite des Rahmens zu definieren. Ob in % oder Pixel</li> <li> <strong>Longdesc:</strong> Mit Hilfe dieses Attributs können Sie eine weitere Seite mit einer ausführlichen Beschreibung des Inhalts Ihres Frames verlinken.</li> </ul> <h3>Beispiele für Iframes in HTML</h3> <p>Hier sind einige Beispiele für Iframes in HTML, die im Folgenden erläutert werden:</p> <h4>Beispiel #1</h4> <p>Betrachten wir ein Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten Höhe und Breite erstellt.</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>Ausgabe:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929564512.png" alt="Iframes in HTML" ></p> <h4>Beispiel #2</h4> <p>Betrachten wir ein weiteres Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten Höhe und Breite erstellt. Aber in diesem Beispiel geben wir Höhe und Breite über CSS an. Hier können wir sehen, dass die Bildlaufleiste je nach Inhaltsgröße angepasst wird.</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>Ausgabe:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929679257.png" alt="Iframes in 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="Iframes in 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="Iframes in 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="Iframes in 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>Das obige ist der detaillierte Inhalt vonIframes in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="HTML-Textdekoration" href="http://m.php.cn/de/faq/1796600197.html">HTML-Textdekoration</a></span><span>Nächster Artikel：<a class="dBlack" title="HTML-Textdekoration" href="http://m.php.cn/de/faq/1796600200.html">HTML-Textdekoration</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/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></html>