Rumah >hujung hadapan web >html tutorial >Iframe dalam HTML

Iframe dalam HTML

WBOYasal: 2024-09-04 16:41:33571semak imbas

Iframe dalam HTML hanyalah bingkai sebaris yang digunakan sebagai dokumen HTML untuk menambah dokumen HTML lain ke dalamnya. Ia kebanyakannya digunakan dalam halaman web atau proses pembangunan web untuk memasukkan kandungan lain melalui sumber lain seperti iklan pada halaman web tersebut.

Kebanyakan pereka web menggunakan Iframe untuk mempersembahkan aplikasi interaktif di tapak web atau halaman web. Ia dimungkinkan menggunakan JavaScript atau atribut sasaran dalam HTML.

Tujuan utama Iframe adalah untuk memaparkan halaman web dalam yang lain. Bingkai sebaris hendaklah dipaparkan menggunakan teg yang dipanggil . Ia berfungsi seperti blok segi empat tepat pada halaman web anda di mana penyemak imbas boleh menunjukkan dokumen lain dengan bar skrol dan sempadan.</p> <p><strong>Sintaks</strong></p> <ul> <li>Sekarang kita akan melihat bagaimana sebenarnya Iframe akan menggunakan:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL"></iframe></pre> <ul> <li>Di sini <iframe> ialah teg di mana iframe HTML akan ditakrifkan. Atribut Src yang digunakan untuk mentakrifkan URL halaman bingkai sebaris akan disertakan.</li> </ul> <p><strong>Contoh:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" ></iframe></pre> <ul> <li>Ia juga mungkin untuk memberikan beberapa ketinggian dan lebar tertentu kepada Iframe kami dalam format piksel seperti berikut:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" height="value" width="value"></iframe></pre> <ul> <li>Dalam sintaks di atas, semua perkara akan menjadi sama; selain itu, kami boleh menentukan ketinggian dan lebar dalam format piksel, mentakrifkannya sebagai</li> </ul> <p><strong>Contoh:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" height="300" width="300"></iframe></pre> <ul> <li>Satu lagi kaedah untuk menentukan ketinggian dan lebar iframe dengan menggunakan nilai melalui CSS ditunjukkan dalam sintaks di bawah:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe></pre> <ul> <li>Semua perkara adalah sama seperti di atas, hanya melakukan perubahan dalam menentukan nilai.</li> </ul> <p><strong>Contoh:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe></pre> <ul> <li>Satu lagi ciri yang ditambahkan pada iframe ialah kita boleh mengalih keluar sempadan yang telah ditetapkan pada bingkai dengan menggunakan sifat sempadan none. Sintaks untuk ini adalah seperti berikut:</li> </ul> <pre class="brush:php;toolbar:false"><iframe src ="URL" style="border : none;"></iframe></pre> <ul> <li>Dengan bantuan CSS, anda juga boleh melakukan banyak perkara dengan jidar, seperti menukar saiznya, menggunakan beberapa warna pada jidar, dsb.</li> </ul> <p>Iframe boleh digunakan sebagai Sasaran untuk pautan dengan menggunakan sintaks:</p> <pre class="brush:php;toolbar:false"><iframe src ="URL" name="iframe_a"></iframe></pre> <ul> <li>Dalam sintaks di atas, src ialah URL biasa kami; di sini, atribut sasaran pautan akan merujuk kepada atribut nama dalam teg iframe kami.</li> </ul> <p><strong>Contoh:</strong></p> <pre class="brush:php;toolbar:false"><iframe src ="www.educba.com" name="iframe_a"></iframe></pre> <h3>Atribut Teg Iframes</h3> <p>Terdapat teg atribut berbeza yang digunakan dalam Iframes. Itu adalah seperti berikut:</p> <ul> <li> <strong>Src:</strong> Atribut ini digunakan untuk memasukkan fail yang perlu disertakan dalam bingkai. URL menentukan halaman web sasaran untuk dimuatkan dalam iframe.</li> <li> <strong>Nama:</strong> Nama ialah atribut yang digunakan untuk memberikan beberapa nama pengenalan kepada bingkai. Ia paling berguna apabila anda membuat satu pautan untuk membuka halaman web lain.</li> <li> <strong>allowfullscreen:</strong> Atribut ini membolehkan anda memaparkan bingkai anda dalam format lebar penuh. Jadi kita perlu menetapkan nilai yang benar untuk berlaku pada fungsi ini.</li> <li> <strong>Sempadan bingkai:</strong> Ini ialah atribut berguna yang membolehkan anda menunjukkan jidar atau tidak menunjukkan jidar kepada bingkai. Nilai 1 ialah untuk menunjukkan sempadan & 0 bukan untuk menunjukkan sempadan kepada bingkai.</li> <li> <strong>Lebar Margin:</strong> Membolehkan anda menentukan ruang antara sisi kiri & kanan bingkai.</li> <li> <strong>Ketinggian Margin:</strong> Ini membolehkan anda menentukan ruang antara bahagian atas & bawah bingkai.</li> <li> <strong>Menatal:</strong> Atribut ini mengawal sama ada bar skrol akan dipaparkan atau tidak dalam bingkai. Nilai yang disertakan ialah 'ya', 'tidak' atau 'auto.'</li> <li> <strong>Ketinggian:</strong> Ia digunakan untuk menentukan ketinggian bingkai. Sama ada dalam % atau piksel</li> <li> <strong>Lebar:</strong> Ia digunakan untuk menentukan lebar bingkai. Sama ada dalam % atau piksel</li> <li> <strong>Longdesc:</strong> Dengan bantuan atribut ini, anda boleh memautkan halaman lain dengan penerangan panjang tentang kandungan bingkai anda.</li> </ul> <h3>Contoh Iframe dalam HTML</h3> <p>Berikut ialah beberapa contoh Iframe dalam HTML, yang diterangkan di bawah:</p> <h4>Contoh #1</h4> <p>Mari kita pertimbangkan satu contoh di mana kita akan menunjukkan cara membuat iframe dengan ketinggian dan lebar tertentu.</p> <p><strong>Kod:</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="Iframe dalam HTML" ></p> <h4>Contoh #2</h4> <p>Mari kita pertimbangkan contoh lain di mana kita akan menunjukkan cara membuat iframe dengan ketinggian dan lebar tertentu. Tetapi dalam contoh ini, kami menentukan ketinggian dan lebar melalui CSS. Di sini kita dapat melihat bar skrol sedang dilaraskan mengikut saiz kandungan.</p> <p><strong>Kod:</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="Iframe dalam 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 dalam 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 dalam 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 dalam 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>Atas ialah kandungan terperinci Iframe dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Hiasan Teks HTML" href="https://m.php.cn/ms/faq/1796600197.html">Hiasan Teks HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="Hiasan Teks HTML" href="https://m.php.cn/ms/faq/1796600200.html">Hiasan Teks HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/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>