HTML - srcdoc 属性



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

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

它可以与 sandbox 和 seamless 属性一起使用。

语法

<tag srcdoc="HTML_code" >

**HTML 代码:** 用于指定将在 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 tutorialspoint. I provide easy 
      learning tutorials. Have a happy learning experience.</p>" 
               height="100" 
               width="300">
      </iframe>
</body>

</html>

使用 srcdoc 覆盖 src 属性的内容

srcdoc 中的内容替换了 src 属性中提供的 tutorialspoint 网站。

<!DOCTYPE html>
<html>
<body>
      <h3>HTML srcdoc Attribute</h3>
      <strong>Normal Iframe</strong>
      <br>
      <iframe src=
"https://tutorialspoint.com/html/html_overview.htm"
              height=400 
              width="500">
      </iframe>
      <br>
      <strong>Normal Iframe</strong>
      <br>
      <iframe src=
"https://tutorialspoint.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
srcdoc 20.0 79.0 25.0 6.0 15.0
html_attributes_reference.htm
广告