HTML - srcdoc 属性



HTML srcdoc 属性指定页面上要在内联框架中显示的 HTML 内容。

如果 <iframe> 元素中存在 srcdoc 属性,则它将覆盖 src 属性中指定的内容。如果 <iframe> 元素中不存在 srcdoc 属性,则它将显示 src 属性中指定的文件。

它可以与沙箱和无缝属性一起使用。

语法


 <tag srcdoc="HTML_code" >

HTML_code:它用于指定将在 iframe 元素中显示的页面的 HTML 内容。

适用对象

下面列出的元素允许使用 HTML srcdoc 属性。

元素 描述
<iframe> HTML <iframe> 标签用于创建内联框架。

HTML srcdoc 属性的示例

以下示例将说明 HTML srcdoc 属性,我们应该在何处以及如何使用此属性!

使用带有 “iframe” 标签的 srcdoc 属性

srcdoc 属性中提供的内容显示在输出窗口中。


<!DOCTYPE html>
<html>

<head>
			<title>HTML iframe srcdoc Attribute</title>
</head>

<body>
			<h1>HTML iframe srcdoc Attribute</h1>
			<iframe srcdoc="<p>Hi, I am QikepuCom. I provide easy 
			learning QikepuCom. Have a happy learning experience.</p>" 
							 height="100" 
							 width="300">
			</iframe>
</body>

</html>

使用 srcdoc 覆盖 src 属性的内容

srcdoc 中的内容替换了 src 属性中给出的 qikepu 网站。


<!DOCTYPE html>
<html>
<body>
			<h3>HTML srcdoc Attribute</h3>
			<strong>Normal Iframe</strong>
			<br>
			<iframe src=
"https://qikepu.com/html/html_overview.htm"
							height=400 
							width="500">
			</iframe>
			<br>
			<strong>Normal Iframe</strong>
			<br>
			<iframe src=
"https://qikepu.com/html/html_overview.htm"
							srcdoc=
		"<p>We ere representing HTML Introduction Post</p>" 
							height=400 
							width="500">
			</iframe>
		  
</body>

</html>

 支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
是否支持 20.0 79.0 25.0 6.0 15.0