HTML DOM iFrame 物件

HTML DOM iframe 物件表示 HTML 文件的 <iframe> 元素。

現在讓我們建立一個 iframe 物件 −

語法

以下是語法：

document.createElement(“IFRAME”);

屬性

以下是 iframe 物件的屬性 −

屬性	說明
contentDocument	它返回由 iframe HTML 元素生成的文件物件。
contentWindow	它返回由 iframe HTML 元素生成的視窗物件。
height	它返回和修改 iframe HTML 元素的 height 屬性的值。
name	它返回和修改 iframe HTML 元素的 name 屬性的值。
sandbox	它返回和修改 iframe HTML 元素的 sandbox 屬性的值。
seamless	它返回和修改 iframe 是否應看起來像 Seamless，如網頁的一部分，即沒有邊框和沒有捲軸。
src	它返回和修改 iframe HTML 元素的 src 屬性的值。
srcdoc	它返回和修改 iframe HTML 元素的 srcdoc 屬性值。
width	它返回和修改 iframe HTML 元素的 width 屬性的值。

示例

讓我們看一個 DOM iframe 物件的示例 −

實際操作

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .btn{
      background-color:lightblue;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
   }
</style>
</head>
<body>
<h1>DOM IFrame Object Example</h1>
<button onclick="createIframe()" class="btn">Click me to create an iframe</button>
<script>
   function createIframe() {
      var x = document.createElement("IFRAME");
      x.setAttribute("src", "https://tutorialspoint.tw/");
      document.body.appendChild(x);
   }
</script>
</body>
</html>