程序首页
文章
下载
合集
在线运行代码
手机客户端
首页
>
文章列表
> 如何在HTML中指定要在
中显示的页面的HTML内容？</div> <div class="ngfLeft"> <div class="ngfXlhBox"> <div class="ngfTjzxIn"> <div class="ngfSpxqTitle"> <h1>如何在HTML中指定要在<iframe>中显示的页面的HTML内容？</h1> <span> <em> <a href="javascript:;" title="HTML嵌套">HTML嵌套</a> <a href="javascript:;" title="iframe标签">iframe标签</a> <a href="javascript:;" title="内容指定">内容指定</a> <div class="clear"></div> </em> <i><b class="icon1"></b>297</i> <i><b class="icon2"></b>2023-09-12</i> <div class="clear"></div> </span> </div> <div class="ngfSpxqCont"> <p>在本文中，我们需要在<b>iframe</b>中显示页面的HTML内容；浏览器窗口划分为单独的页面。我们可以使用 <iframe> 标记及其 <b><i>srcdoc</i></b> 属性来完成此任务。</p> <h2>HTML <iframe> 标签</h2> <p>HTML 中的 <b><iframe></b> 标记指定内联框架。该内联框架用于在当前 HTML 文档中嵌入另一个文档。所有浏览器都支持此标签，例如 Google Chrome、Microsoft Edge/Internet Explorer、Firefox、safari 和 Opera 等。</p> <p><b><iframe></b>标签的“<b><i>srcdoc</i></b>”属性用于指定要在页面中显示的HTML内容<iframe>。该属性将 HTML_code 作为值并指定要在 <iframe> 中显示的页面的 HTML 内容。</p> <h3>示例 1</h3> <p>在下面的示例中，我们使用带有 <iframe> 标记的“srcdoc”属性来指定要在 HTML 中的 <iframe> 中显示的页面（<h2> 元素）的 HTML 内容。</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <title> How to specify the HTML content of the page to show in the "iframe" in HTML? </title> </head> <body> <h3>How to specify the HTML content of the page to show in the "iframe" in HTML?</h3> <p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p> <iframe srcdoc="<h2>You can find any tutorial on tutorialspoint</h2>"> <p>Browser does not support iframes.</p> </iframe> </body> </html> </pre> <p>正如我们在输出中看到的，文档中的 HTML 内容（<h2> 元素）显示在 <iframe> 中。</p> <h3>示例 2</h3> <p>以下是 HTML Iframe 的另一个示例，在此，我们在 iframe 中创建了一个表格。</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <title> How to specify the HTML content of the page to show in the "iframe" in HTML? </title> </head> <body> <h3>How to specify the HTML content of the page to show in the "iframe" in HTML?</h3> <p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p> <iframe srcdoc="<table border = 3> <caption> Abbreviations </caption> <tr> <th> HTML </th> <th> CSS </th> </tr> <tr> <td> Hypertext markup language</td> <td> Cascading style sheet </td> </tr> </table>"> <p>Browser does not support iframes.</p> </iframe> </body> </html> </pre> <p>正如我们在输出中看到的，文档中的 HTML 内容（HTML 表格）显示在 <iframe> 中。</p> <h3>示例 3</h3> <p>默认情况下，所有浏览器都会将 <iframe> 显示为默认值。我们可以使用CSS来改变<iframe>的样式。</p> <p>在下面的示例中，</p> <ul class="list"> <li><p>我们通过使用 CSS 更改 <iframe> 的宽度、高度和边框来更改其样式。</p></li> <li><p>我们使用带有 <iframe> 标记的“srcdoc”属性来指定要在 HTML 中的 <iframe> 中显示的页面（ 元素）的 HTML 内容。</p></li> </ul> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <title> How to specify the HTML content of the page to show in the "iframe" in HTML? </title> </head> <body> <h3>How to specify the HTML content of the page to show in the "iframe" in HTML?</h3> <p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p> <iframe srcdoc="<div> Hello Disha</div>" width="50%" height="100" style="border:3px solid green;"> <p>Browser does not support iframes.</p> </iframe> </body> </html> </pre> <p>正如我们在输出中看到的，文档中的 HTML 内容（ 元素）显示在 <iframe> 中，并且我们还使用 CSS 更改了 <iframe> 的样式。</p> <div style="float: right;overflow: hidden;height: 20px;line-height: 16px;font-size: 14px;color:gray;"> 来源：<a href="https://www.tutorialspoint.com/how-to-specify-the-html-content-of-the-page-to-show-in-the-and-lt-iframeand-gt-in-html" class="aBlack" title="https://www.tutorialspoint.com/how-to-specify-the-html-content-of-the-page-to-show-in-the-and-lt-iframeand-gt-in-html" target="_blank" rel="nofollow">https://www.tutorialspoint.com/how-to-specify-the-html-content-of-the-page-to-show-in-the-and-lt-iframeand-gt-in-html</a> </div> </div> <div class="ngfSypBox"> <a href="https://www.jiaoben.net/article/54559.html" class="aBlue" title="">上一篇 如何使Materialize CSS复选框与@Html.CheckBoxFor一起工作？</a> <a href="https://www.jiaoben.net/article/54561.html" class="aBlue" title="">下一篇 在JavaScript中，parseInt()方法的作用是什么？</a> <div class="clear"></div> </div> </div> </div> <div class="ngfXlhBox"> <div class="ngfTjzxIn"> <div class="ngfTjzxTitle"> <b></b> <h2>本类最新</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="查看更多" target="_blank" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfSpjcList"> <li> <a href="https://www.jiaoben.net/article/241298.html" class="aBlack" target="_blank" title="如何自定义 Element Table 表头文字的对齐方式？"> <span><img data-src="/uploads/20250312/174178470767d18683d4ac3.jpg" alt="如何自定义 Element Table 表头文字的对齐方式？" class="lazyload" src="/uploads/20250312/174178470767d18683d4ac3.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何自定义 Element Table 表头文字的对齐方式？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/313333.html" class="aBlack" target="_blank" title="CSS悬停浮窗效果如何实现及如何解决意外触发和样式警告？"> <span><img data-src="/uploads/20250312/174178262167d17e5d2b6be.jpg" alt="CSS悬停浮窗效果如何实现及如何解决意外触发和样式警告？" class="lazyload" src="/uploads/20250312/174178262167d17e5d2b6be.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>CSS悬停浮窗效果如何实现及如何解决意外触发和样式警告？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/310993.html" class="aBlack" target="_blank" title="如何通过后端接口动态调整Facebook分享内容？ "> <span><img data-src="/uploads/20250312/174178201467d17bfeb5bc1.jpg" alt="如何通过后端接口动态调整Facebook分享内容？ " class="lazyload" src="/uploads/20250312/174178201467d17bfeb5bc1.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何通过后端接口动态调整Facebook分享内容？ </p> </a> </li> <li> <a href="https://www.jiaoben.net/article/313828.html" class="aBlack" target="_blank" title="Flex布局中`flex: 1; width: 0;`如何防止子元素挤压前一个元素？ "> <span><img data-src="/uploads/20250312/174178111367d1787976e01.jpg" alt="Flex布局中`flex: 1; width: 0;`如何防止子元素挤压前一个元素？ " class="lazyload" src="/uploads/20250312/174178111367d1787976e01.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>Flex布局中`flex: 1; width: 0;`如何防止子元素挤压前一个元素？ </p> </a> </li> <li> <a href="https://www.jiaoben.net/article/298642.html" class="aBlack" target="_blank" title="栅栏式卡片布局如何实现跨行整齐排列？"> <span><img data-src="/uploads/20250312/174177990967d173c565588.jpg" alt="栅栏式卡片布局如何实现跨行整齐排列？" class="lazyload" src="/uploads/20250312/174177990967d173c565588.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>栅栏式卡片布局如何实现跨行整齐排列？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/302218.html" class="aBlack" target="_blank" title="meta标签Cache-Control设置如何影响单页应用中JS文件的缓存？ "> <span><img data-src="/uploads/20250312/174177960867d1729869b1c.jpg" alt="meta标签Cache-Control设置如何影响单页应用中JS文件的缓存？ " class="lazyload" src="/uploads/20250312/174177960867d1729869b1c.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>meta标签Cache-Control设置如何影响单页应用中JS文件的缓存？ </p> </a> </li> <div class="clear"></div> </ul> </div> </div> </div> <div class="ngfRight"> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门推荐</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" target="_blank" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfJxydList"> <li> <span><a href="https://www.jiaoben.net/article/251314.html" target="_blank" title="如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？"><img data-src="/uploads/20250311/174167070367cfc92fa6292.jpg" alt="如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？" class="lazyload" src="/uploads/20250311/174167070367cfc92fa6292.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/251314.html" target="_blank" title="如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？" class="aBlack">如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？</a></dt> <dd> <em><b class="icon1"></b>501</em> <em><b class="icon2"></b>2025-03-11</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/302803.html" target="_blank" title="小程序开发：如何用列表循环高效处理不同状态的子项？ "><img data-src="/uploads/20250310/174161099267cedff040853.jpg" alt="小程序开发：如何用列表循环高效处理不同状态的子项？ " class="lazyload" src="/uploads/20250310/174161099267cedff040853.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/302803.html" target="_blank" title="小程序开发：如何用列表循环高效处理不同状态的子项？ " class="aBlack">小程序开发：如何用列表循环高效处理不同状态的子项？ </a></dt> <dd> <em><b class="icon1"></b>501</em> <em><b class="icon2"></b>2025-03-10</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/280068.html" target="_blank" title="轻松网页设计必须了解的 Tailwind CSS 类"><img data-src="/uploads/20250212/173933985667ac385079e44.png" alt="轻松网页设计必须了解的 Tailwind CSS 类" class="lazyload" src="/uploads/20250212/173933985667ac385079e44.png" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/280068.html" target="_blank" title="轻松网页设计必须了解的 Tailwind CSS 类" class="aBlack">轻松网页设计必须了解的 Tailwind CSS 类</a></dt> <dd> <em><b class="icon1"></b>500</em> <em><b class="icon2"></b>2025-02-12</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/309840.html" target="_blank" title="CSS全局置灰如何优雅地保留图片原色？"><img data-src="/uploads/20250310/174159868967ceafe14fd78.jpg" alt="CSS全局置灰如何优雅地保留图片原色？" class="lazyload" src="/uploads/20250310/174159868967ceafe14fd78.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/309840.html" target="_blank" title="CSS全局置灰如何优雅地保留图片原色？" class="aBlack">CSS全局置灰如何优雅地保留图片原色？</a></dt> <dd> <em><b class="icon1"></b>500</em> <em><b class="icon2"></b>2025-03-10</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/238101.html" target="_blank" title="服务器上传速度和下载速度，哪个对提高网站访问速度影响更大？"><img data-src="/uploads/20250227/174064502967c022a5a4676.jpg" alt="服务器上传速度和下载速度，哪个对提高网站访问速度影响更大？" class="lazyload" src="/uploads/20250227/174064502967c022a5a4676.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/238101.html" target="_blank" title="服务器上传速度和下载速度，哪个对提高网站访问速度影响更大？" class="aBlack">服务器上传速度和下载速度，哪个对提高网站访问速度影响更大？</a></dt> <dd> <em><b class="icon1"></b>499</em> <em><b class="icon2"></b>2025-02-27</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/307397.html" target="_blank" title="Selenium截图如何去除恼人的滚动条？"><img data-src="/uploads/20250310/174161009367cedc6d2a002.jpg" alt="Selenium截图如何去除恼人的滚动条？" class="lazyload" src="/uploads/20250310/174161009367cedc6d2a002.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/307397.html" target="_blank" title="Selenium截图如何去除恼人的滚动条？" class="aBlack">Selenium截图如何去除恼人的滚动条？</a></dt> <dd> <em><b class="icon1"></b>498</em> <em><b class="icon2"></b>2025-03-10</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> </ul> </div> </div> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门教程</h2> <span> <a href="https://www.jiaoben.net/articlelist" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfRmspList"> <li> <a href="https://www.jiaoben.net/article/283915.html" title="支付宝注册时间在哪里看 支付宝查看账号注册时间教程介绍" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250219/173997705667b5f16060c32.png" alt="支付宝注册时间在哪里看 支付宝查看账号注册时间教程介绍" class="lazyload" src="/uploads/20250219/173997705667b5f16060c32.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>支付宝注册时间在哪里看 支付宝查看账号注册时间教程介绍</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/178453.html" title="欧盟对中国电动汽车进行深入调查，背后的‘小动作’也被揭露" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250221/174014140167b87359b924a.jpg" alt="欧盟对中国电动汽车进行深入调查，背后的‘小动作’也被揭露" class="lazyload" src="/uploads/20250221/174014140167b87359b924a.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>欧盟对中国电动汽车进行深入调查，背后的‘小动作’也被揭露</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/201825.html" title="剪映宇宙特效怎么制作 剪映宇宙特效制作教程" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250215/173959403167b0192f1a692.jpg" alt="剪映宇宙特效怎么制作 剪映宇宙特效制作教程" class="lazyload" src="/uploads/20250215/173959403167b0192f1a692.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>剪映宇宙特效怎么制作 剪映宇宙特效制作教程</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/187456.html" title="Go 框架中集成测试的最佳实践" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250221/174010035867b7d306c9228.jpg" alt="Go 框架中集成测试的最佳实践" class="lazyload" src="/uploads/20250221/174010035867b7d306c9228.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>Go 框架中集成测试的最佳实践</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/298019.html" title="如何取消钉钉打卡个性主题设置" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250223/174027153467ba6fae633ed.png" alt="如何取消钉钉打卡个性主题设置" class="lazyload" src="/uploads/20250223/174027153467ba6fae633ed.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何取消钉钉打卡个性主题设置</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/285566.html" title="LOFTER怎样搜索标签下内容 LOFTER查找标签下内容流程介绍" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250219/173993349867b5473a54276.png" alt="LOFTER怎样搜索标签下内容 LOFTER查找标签下内容流程介绍" class="lazyload" src="/uploads/20250219/173993349867b5473a54276.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>LOFTER怎样搜索标签下内容 LOFTER查找标签下内容流程介绍</p> </a> </li> <div class="clear"></div> </ul> </div> </div> <!--热门应用 end--> </div> <!--右边 end--> <div class="clear"></div> </div> <div class="sy_footer"> <footer> <div class="footer_cont"> <div class="footcont_left"> <a href="#"> <img style="width: 300px;" src="https://www.jiaoben.net/statics/www/2020images/footer-logo.png" alt=""> </a> </div> <em class="fot_line"></em> <div class="footcont_right"> <p>版权所有：jiaoben.net Copyright 2020~2025</p> <p>本站所有软件、源码、文章均有网友提供，如有侵权联系jiaobennet@163.com</p> <p><a style="color: #999999" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2022002427号</a></p> </div> <div class="clear"></div> </div> </footer> </div> <!--右侧导航--> <div class="ngfYoucBox" id="menuRight"> <a href="https://m.jiaoben.net" class="aBlue"> <b class="icon1" style="float: none;"></b> <p>手机版</p> </a> <a href="javascript:scroll(0,0)" class="cBlack"> <b class="icon2"></b> <p>返回顶部</p> </a> </div> <!--右侧导航 end--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d7dfe7acaf9cb2eaf7c319afb7d1c287"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <div class="ngfZuocBox" id="menuLeft"> <a href="https://www.jiaoben.net/articlelist/31_1.html" title="软件教程">软件教程</a> <a href="https://www.jiaoben.net/articlelist/30_1.html" title="数据库">数据库</a> <a href="https://www.jiaoben.net/articlelist/29_1.html" title="linux">linux</a> <a href="https://www.jiaoben.net/articlelist/28_1.html" title="网络安全">网络安全</a> <a href="https://www.jiaoben.net/articlelist/25_1.html" title="MySql">MySql</a> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="HTML+CSS">HTML+CSS</a> <a href="https://www.jiaoben.net/articlelist/20_1.html" title="JavaScript">JavaScript</a> <a href="https://www.jiaoben.net/articlelist/19_1.html" title="C++">C++</a> <a href="https://www.jiaoben.net/articlelist/18_1.html" title="goLang">goLang</a> <a href="https://www.jiaoben.net/articlelist/17_1.html" title="php">php</a> <a href="https://www.jiaoben.net/articlelist/16_1.html" title="Python">Python</a> <a href="https://www.jiaoben.net/articlelist/15_1.html" title="java">java</a> </div> </body> </html>
