iframe的使用用法-开发者知识库平台

标签用于在当前 HTML 文档中嵌入另一个 HTML 文档。它创建了一个包含另一个文档的内联框架。 <p>以下是 <iframe> 标签的使用方法：</p> <ol> <li>在 HTML 文档中插入 <iframe> 标签，并设置以下属性：</li> </ol> <ul> <li> <p>src：指定要嵌入的文档的 URL。可以是相对路径或绝对路径。</p> </li> <li> <p>width 和 height：设置 <iframe> 元素的宽度和高度。</p> </li> <li> <p>frameborder：指定是否显示框架周围的边框。0 表示不显示边框，1 表示显示边框。</p> </li> <li> <p>scrolling：指定是否显示滚动条。auto 表示根据内容自动显示滚动条，yes 表示始终显示，no 表示不显示。</p> </li> </ul> <p>示例代码：</p> <pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">scrolling</span>=<span class="hljs-string">"auto"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> </code></pre> <ol start="2"> <li>通过 <iframe> 的 name 属性可以为其命名，以便在其他地方引用。这样可以在其他链接或表单目标中使用该名称。</li> </ol> <p>示例代码：</p> <pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"myFrame"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"myFrame"</span>></span>点击链接在 iframe 中打开<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </code></pre> <ol start="3"> <li>可通过在 <iframe> 中插入其他内容来为其提供备用内容。</li> </ol> <p>示例代码：</p> <pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.example.com"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>如果浏览器不支持 iframe，将会显示此段落。<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> </code></pre> <p>需要注意的是，由于安全性考虑，不允许在 <iframe> 中嵌入某些网站的内容，如银行网站等。并且，使用 <iframe> 时应尽量避免跨域问题，即在不同域名下的网页嵌入 <iframe> 可能会受到浏览器的限制。</p> </p> <p class="adv-content"><a href="/" target="_blank">辰迅云<span>「云服务器」</span>，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>></a></p> </div> <p class="tj-wenzhang recommend-article"> 推荐阅读： <a href="/article/ask/programming-language/30376.html">iframe跨域加载页面的方法是什么</a> </p> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-qanews"> <ul> </ul> </div> <div class="hot-answer"> <div class="hot-answer-tit"><h2>最新知识库</h2></div> <div class="hot-answer-list"> <ul> <li> <a href="/article/ask/programming-language/100563.html">php接收post数据的方法是什么</a> </li> <li> <a href="/article/ask/programming-language/177739.html">织梦CMS系统中power by dedecms怎么去掉</a> </li> <li> <a href="/article/ask/programming-language/101010.html">pycharm如何更改项目文件存放位置</a> </li> <li> <a href="/article/ask/programming-language/160589.html">C++怎么实现udp发送和接收</a> </li> <li> <a href="/article/ask/programming-language/107106.html">怎么把c语言发给别人运行</a> </li> <li> <a href="/article/ask/programming-language/76471.html">idea自动编译设置的步骤是什么</a> </li> <li> <a href="/article/ask/programming-language/102271.html">怎么使用Python爬取QQ密码</a> </li> <li> <a href="/article/ask/programming-language/80104.html">直播加加如何开启抖音直播</a> </li> <li> <a href="/article/ask/programming-language/81816.html">c语言怎么将字符串存入数组</a> </li> <li> <a href="/article/ask/programming-language/58214.html">qt如何在项目中添加文件夹</a> </li> </ul> </div> </div> </div> <div class="qa-box-right"> <div class="hot-product-link adv-right"></div> <div class="browse-other-question"> <div class="other-question-tit"><i></i>相关知识库</div> <div class="other-question-list"> <ul> <li> <a href="/article/ask/programming-language/123764.html">iframe子页面怎么向父页面传值</a> </li> <li> <a href="/article/ask/programming-language/137849.html">iframe嵌套页面出现空白怎么解决</a> </li> <li> <a href="/article/ask/programming-language/70736.html">两个iframe之间如何传数据</a> </li> <li> <a href="/article/ask/programming-language/30376.html">iframe跨域加载页面的方法是什么</a> </li> <li> <a href="/article/ask/programming-language/165254.html">iframe嵌套网页被拒绝如何解决</a> </li> <li> <a href="/article/ask/programming-language/52780.html">iframe的基本介绍与使用</a> </li> <li> <a href="/article/ask/programming-language/115342.html">iframe嵌套的页面无法显示如何解决</a> </li> <li> <a href="/article/ask/programming-language/48069.html">iframe的用法有哪些</a> </li> <li> <a href="/article/ask/programming-language/140781.html">iframe标签属性说明详解</a> </li> <li> <a href="/article/ask/programming-language/129059.html">iframe嵌套页面单点登录怎么实现</a> </li> </ul> </div> </div> <div class="hot-tag"> <div class="hot-tag-tit"><h2>相关标签</h2></div> <div class="hot-tag-list clearfix"> <a href="/article/ask/tags/8/">服务器</a> <a href="/article/ask/tags/131/">linux</a> <a href="/article/ask/tags/140/">Java</a> <a href="/article/ask/tags/36/">python</a> <a href="/article/ask/tags/6/">云服务器</a> <a href="/article/ask/tags/11/">mysql</a> <a href="/article/ask/tags/368/">ubuntu</a> <a href="/article/ask/tags/155/">PHP</a> <a href="/article/ask/tags/312/">oracle</a> <a href="/article/ask/tags/393/">c语言</a> <a href="/article/ask/tags/168/">vps</a> <a href="/article/ask/tags/1362/">c++</a> <a href="/article/ask/tags/480/">android</a> <a href="/article/ask/tags/953/">c#</a> <a href="/article/ask/tags/761/">win10</a> <a href="/article/ask/tags/268/">虚拟主机</a> <a href="/article/ask/tags/657/">云主机</a> <a href="/article/ask/tags/287/">sql</a> <a href="/article/ask/tags/33/">香港服务器</a> <a href="/article/ask/tags/759/">美国服务器</a> <a href="/article/ask/tags/49/">数据库</a> <a href="/article/ask/tags/192/">redis</a> <a href="/article/ask/tags/4/">域名</a> <a href="/article/ask/tags/957/">docker</a> <a href="/article/ask/tags/508/">空间</a> <a href="/article/ask/tags/37/">windows</a> <a href="/article/ask/tags/683/">mybatis</a> <a href="/article/ask/tags/10/">高防服务器</a> <a href="/article/ask/tags/172/">win7</a> <a href="/article/ask/tags/32/">CDN</a> </div> </div> </div> </div> </div> <div class="footer"> <div class="other-link clearfix"> <div class="link-look clearfix"> <div class="link-list"> <div class="link-title">云服务器</div> <ul> <li><a href="/hkvm.html">香港(HKT)民用级</a></li> <li><a href="/hkcn2vm.html">香港(CN2)企业级</a></li> <li><a href="/hkddk.html">香港(大带宽)商用级</a></li> <li><a href="/usavm.html">美国高防(20G防御)</a></li> <li><a href="/szvm.html">深圳</a></li> <li><a href="/fzgfvm.html">国内电信高防</a></li> <li><a href="/bgpgf.html">绍兴BGP高防</a></li> <li><a href="/sxdx.html">绍兴电信高防</a></li> <li><a href="/jsvm.html">江苏电信</a></li> </ul> </div> <div class="link-list"> <div class="link-title">物理服务器</div> <ul> <li><a href="/server/hongkong.html">香港物理机</li> <li><a href="/server/usa.html">美国普防</li> <li><a href="/server/usaddk.html">美国大带宽</li> <li><a href="/server/HKXK.html">显卡物理机</li> <li><a href="/server/korea.html">韩国</li> <li><a href="/server/mggf.html">美国高防</li> <li><a href="/server/japan.html">日本</li> <li><a href="/server/TW.html">台湾</li> <li><a href="/server/malasiya.html">马来西亚</li> <li><a href="/server/zhanqun.html">站群物理机</li> <li><a href="/server/shaoxing.html">绍兴电信/绍兴BGP高防</li> <li><a href="/server/yangzhou.html">扬州BGP高防</li> <li><a href="/server/zaozhuang.html">枣庄电信BGP高防</li> <li><a href="/server/qz.html">泉州电信高防</li> </ul> </div> <div class="link-list"> <div class="link-title">知识库</div> <ul> <li > <a href="/article/ask/cloud-computing/">云计算</a> </li> <li class="active"> <a href="/article/ask/programming-language/">编程语言</a> </li> <li > <a href="/article/ask/network-security/">网络安全</a> </li> <li > <a href="/article/ask/intelligent/">智能运维</a> </li> <li > <a href="/article/ask/big-data/">大数据</a> </li> <li > <a href="/article/ask/deep-learning/">深度学习</a> </li> <li > <a href="/article/ask/tags/">Tag标签</a> </li> </ul> </div> <div class="link-list"> <div class="link-title">帮助支持</div> <ul> <ul> <li> <a href="/article/list_8_1.html">云服务器类</a> </li> <li> <a href="/article/list_0_1.html">域名类</a> </li> <li> <a href="/article/list_1_1.html">虚拟主机类</a> </li> <li> <a href="/article/list_4_1.html">独立服务器</a> </li> <li> <a href="/article/list_6_1.html">付款类</a> </li> <li> <a href="/article/list_7_1.html">其他类</a> </li> </ul> </ul> </div> <div class="link-list"> <div class="link-title">关于我们</div> <ul> <li><a href="/help/aboutus.html" title="关于我们">关于我们</a></li> <li><a href="/help/aboutus.html" title="发展历程">发展历程</a></li> <li><a href="/help/aboutus.html" title="资质荣誉">资质荣誉</a></li> <li><a href="/help/aboutus.html" title="新闻公告">新闻公告</a></li> <li><a href="/help/aboutus.html" title="诚聘英才">诚聘英才</a></li> <li><a href="/help/aboutus.html" title="联系我们">联系我们</a></li> </ul> </div> </div> <div class="yisu-contact"> <div class="contact-tit">售后咨询</div> <div class="yisu-phone">7*24小时在线电话：<span>400-0666-318</span></div> <div class="yisu-qq">7*24小时在线 QQ：<span><a href="http://q.url.cn/ABNn1U?_type=wpa&qidian=true" id="qqfoot" target="_blank"></a></span></div> </div> </div> <div class="footer-bottom"> <p>Copyright © chenxunyun.com All Rights Reserved. 2013 版权所有</p> <p><span>上海零时信息科技有限公司</span><span><a href="http://beian.miit.gov.cn/" style="color: #6C6E73;" target="_blank" rel="nofollow">沪ICP备20007084号</a> </span><span>《中华人民共和国增值电信业务经营许可证》编号： B1-20194590号</span></p> </div> </div> <div class="common-backtop-link"><i></i></div> </body> </html> <script type="text/javascript" src="/article/ask/js/jquery-1.9.1.min.js" charset="UTF-8"></script> <script type="text/javascript" src="/article/ask/js/highlight.js" charset="UTF-8"></script> <script>hljs.initHighlightingOnLoad();</script> <script> $(function (){ let copyid = 0; $('pre').each(function(){ copyid++; $(this).attr( 'data-copyid', copyid).wrap( '<div class="pre-wrapper"/>'); $(this).parent().css( 'margin', $(this).css( 'margin') ); $('<button class="copy-code">复制代码</button>').insertAfter( $(this) ).attr( 'copytarget',copyid ); }); $(document).on( 'click', '.copy-code', function(){ var $copyButton = $(this); $pre = $(document).find('pre[data-copyid=' + $copyButton.attr('copytarget' ) + ']'); if ( $pre.length ) { var textArea = document.createElement("textarea"); // Place in top-left corner of screen regardless of scroll position. textArea.style.position = 'fixed'; textArea.style.bottom = 0; textArea.style.left = 0; // Ensure it has a small width and height. Setting to 1px / 1em // doesn't work as this gives a negative w/h on some browsers. textArea.style.width = '2em'; textArea.style.height = '2em'; // We don't need padding, reducing the size if it does flash render. textArea.style.padding = 0; // Clean up any borders. textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; textArea.style.opacity = '0'; // Avoid flash of white box if rendered for any reason. textArea.style.background = 'transparent'; textArea.style.whiteSpace='pre'; textArea.value = $copyButton.siblings('pre').text() document.body.appendChild(textArea); textArea.select(); try { document.execCommand('copy'); $(this).text( '复制成功').prop('disabled', true); } catch (err) { } setTimeout(function(){ $copyButton.text( '复制代码').prop('disabled', false); }, 2000); textArea.remove(); } }); }) document.addEventListener('DOMContentLoaded', (event) => { hljs.configure({ // 忽略未经转义的 HTML 字符 ignoreUnescapedHTML: true, }) document.querySelectorAll('pre').forEach((block) => { hljs.highlightBlock(block); }); }); </script>