Home >Web Front-end >HTML Tutorial >Iframes in HTML

Iframes in HTML

WBOYOriginal: 2024-09-04 16:41:33571browse

Iframes in HTML are nothing but inline frames used as an HTML document to add another HTML document into it. It’s mostly used in web pages or web development processes to include other content through another source like advertisements on that webpage.

Most web designers use Iframe to present interactive applications on the website or web pages. It’s made possible using JavaScript or the target attribute in HTML.

The main purpose of an Iframe is to display a web page within another. The inline frame should be displayed using a tag called . It works like a rectangular block on your web page where the browser can show another document with scrollbars and borders.</p> <p><strong>Syntax</strong></p> <ul> <li>Now we will see how exactly Iframe is going to use:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL"></iframe></pre> <ul> <li>Here <iframe> is a tag where HTML iframes will be defined. Src attributes that are used to define the URL of the inline frame page will be included.</li> </ul> <p><strong>Example:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" ></iframe></pre> <ul> <li>It is also possible to give some specific height and width to our Iframe in pixels format as follows:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" height="value" width="value"></iframe></pre> <ul> <li>In the above syntax, all things will be going to same; additionally, we can specify height and width in pixels format, defining them as</li> </ul> <p><strong>Example:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" height="300" width="300"></iframe></pre> <ul> <li>One more method for defining the height and width of the iframe by using values through CSS is shown in the syntax below:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe></pre> <ul> <li>All things are the same as above, just doing a change in specifying values.</li> </ul> <p><strong>Example:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe></pre> <ul> <li>One more feature that gets added to the iframe is we can remove already defined borders to the frame by using border none property. The syntax for this is as follows:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="border : none;"></iframe></pre> <ul> <li>With the help of CSS, it’s also possible to do many things with the border, like changing its size, applying some color to the border, etc.</li> </ul> <p>The iframe can be used as Target for a link by using the syntax:</p> <pre class="brush:php;toolbar:false"><iframe src ="URL" name="iframe_a"></iframe></pre> <ul> <li>In the above syntax, src is our normal URL; here, the link’s target attribute will refer to the name attribute in our iframe tag.</li> </ul> <p><strong>Example:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" name="iframe_a"></iframe></pre> <h3>Iframes Tag Attribute</h3> <p>There are different attribute tags used in Iframes. Those are as follows:</p> <ul> <li> <strong>Src:</strong> This attribute is used to insert a file that needs to be included in the frame. URL specifies the target webpage to be loaded within an iframe.</li> <li> <strong>Name:</strong> Name is an attribute used to give some identification name to the frame. It’s most useful when you are creating one link to open another webpage.</li> <li> <strong>allowfullscreen:</strong> This attribute allows you to display your frame in the full-width format. So we have to set the value true to happen to this function.</li> <li> <strong>Frameborder:</strong> This is a helpful attribute that allows you to show a border or not to show the border to the frame. Value 1 is to show the border & 0 is not to show the border to the frame.</li> <li> <strong>Marginwidth:</strong> Allows you to define space between the left & right sides of the frame.</li> <li> <strong>Marginheight:</strong> This allows you to define space between the top & bottom of the frame.</li> <li> <strong>Scrolling:</strong> These attributes control whether the scrollbar will show or not in the frame. The values included are ‘yes’, ‘ no,’ or ‘auto.’</li> <li> <strong>Height:</strong> It is used to define the height of the frame. Whether in % or pixels</li> <li> <strong>Width:</strong> It is used to define the width of the frame. Whether in % or pixels</li> <li> <strong>Longdesc:</strong> With the help of this attribute, you can link another page with a lengthy description of the contents of your frame.</li> </ul> <h3>Examples of Iframes in HTML</h3> <p>Here are some examples of Iframes in HTML, which are explained below:</p> <h4>Example #1</h4> <p>Let’s consider one example where we will show how to create an iframe with a specific height and width.</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543929564512.png" alt="Iframes in HTML" ></p> <h4>Example #2</h4> <p>Let’s consider another example where we will show how to create an iframe with a specific height and width. But in this example, we are specifying height and width through CSS. Here we can see the scroll bar is being adjusted per content size.</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>Output:</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>The above is the detailed content of Iframes in HTML. For more information, please follow other related articles on the PHP Chinese 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>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="HTML Text Decoration" href="https://m.php.cn/faq/1796600197.html">HTML Text Decoration</a></span><span>Next article：<a class="dBlack" title="HTML Text Decoration" href="https://m.php.cn/faq/1796600200.html">HTML Text Decoration</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</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/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</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>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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>