文章专题学习下载问答编程词典手游最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)

首页 > web前端 > html教程 > 正文

如何在HTML中指定要在<iframe>中显示的页面的HTML内容？

WBOY

发布： 2023-09-10 14:57:07

转载

1342 人浏览过

如何在HTML中指定要在<iframe>中显示的页面的HTML内容？

在本文中，我们需要在iframe中显示页面的HTML内容；浏览器窗口划分为单独的页面。我们可以使用标记及其 <b><i>srcdoc</i></b> 属性来完成此任务。

HTML 标签

HTML 中的标记指定内联框架。该内联框架用于在当前 HTML 文档中嵌入另一个文档。所有浏览器都支持此标签，例如 Google Chrome、Microsoft Edge/Internet Explorer、Firefox、safari 和 Opera 等。

标签的“srcdoc”属性用于指定要在页面中显示的HTML内容。该属性将 HTML_code 作为值并指定要在 <iframe> 中显示的页面的 HTML 内容。

示例 1

在下面的示例中，我们使用带有标记的“srcdoc”属性来指定要在 HTML 中的 <iframe> 中显示的页面（<h2> 元素）的 HTML 内容。</h2>

How to specify the HTML content of the page to show in the "iframe" in HTML?

How to specify the HTML content of the page to show in the "iframe" in HTML?

We can do it by using srcdoc attribute of iframe in HTML.

登录后复制

正如我们在输出中看到的，文档中的 HTML 内容（

元素）显示在中。</p> <h3>示例 2</h3> <p>以下是 HTML Iframe 的另一个示例，在此，我们在 iframe 中创建了一个表格。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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>
登录后复制

正如我们在输出中看到的，文档中的 HTML 内容（HTML 表格）显示在中。</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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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>

登录后复制

正如我们在输出中看到的，文档中的 HTML 内容（元素）显示在中，并且我们还使用 CSS 更改了 <iframe> 的样式。

以上是如何在HTML中指定要在<iframe>中显示的页面的HTML内容？的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：

html嵌套 iframe标签内容指定

来源：tutorialspoint.com

上一篇：如何用HTML将“布局”中的默认元标签替换为“视图”中的自定义元标签？下一篇：将鼠标点击传递到覆盖的HTML元素

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

红树林生活在海水中，地下部分长期处于

2024-07-16 20:51:52
《地下城与勇士：起源》尼巫的索菲短裙装备图鉴

2024-07-16 20:51:29
壁挂炉与温控器的连接方法（如何实现壁挂炉与温控器的无线连接）

2024-07-16 20:51:10
《王者荣耀》元流之子免费饰品怎么领取

2024-07-16 20:47:59
2.39 亿千瓦，我国南方区域持续高温下用电负荷今年首创历史新高

2024-07-16 20:47:41
犀角杯背长多少厘米?

2024-07-16 20:47:30
Bitcoin (BTC) Price Hinges on 4 Macro Market Movers as ETH ETF Anticipation Builds

2024-07-16 20:46:21
五行降妖师怎么分解灵韵五行降妖师灵纹怎么分解

2024-07-16 20:46:01
《世界启元》铁锤查理技能阵容搭配推荐

2024-07-16 20:42:14
Lionel Messi 将基于 Solana 的 Memecoin 水量增加了 350%，引起了加密社区的担忧

2024-07-16 20:41:31

最新问题

如何在HTML/CSS中嵌入背景视频？大家好，我最近遇到了一个问题。我尝试给我的网站设置一个视频背景，但是居中的文本一直跑到底部，我不知道为什么，然而导航栏却没问题。我做了很多研究，但是找不到解决办法。对于CSS，我做...

来自于 2023-11-06 13:59:13

0

1

240

Vite HMR 无法检测子文件夹内组件的更改在Vue+Vite项目中，我有这样的文件夹结构问题是vite无法检测A.vue或B.vue中的更改（ctrl+s），即嵌套在组件文件夹中的NestedFolder下的组件。其他地方...

来自于 2023-11-04 09:37:46

0

1

272

Vue.js 3 和 Pinia Getters 的问题我正在从Angular切换到Vue.js并尝试理解其架构。我目前遇到了一个基本问题，并使用了很多解决方法，但我实际上只考虑临时解决方案。这里的主要问题是Vue.js3和Pinia之...

来自于 2023-11-03 18:52:56

0

1

244

为什么 nth-of-type/nth-child 对嵌套元素不起作用？我正在尝试更改div内的奇数div的样式。由于某种原因，当nth-of-type(odd)位于另一个div内时，它会影响我的所有div。这是我的常规div和奇数div的代码：.vi...

来自于 2023-10-23 10:39:24

0

1

211

当 Flexbox 项目以列模式换行时，容器不会增加其宽度我正在开发一个嵌套的Flexbox布局，其工作原理如下：最外层（ul#main）是一个水平列表，当添加更多项目时必须向右扩展。如果它变得太大，应该有一个水平滚动条。#main{di...

来自于 2023-10-17 22:05:01

0

2

176

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1386299
php入门教程之一周学会PHP

4192758
JAVA 初级入门视频教程

2287255
小甲鱼零基础入门学习Python视频教程

487501
PHP 零基础入门教程

819237

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责声明 Sitemap: PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！