HTML DOM iFrame用法及代碼示例

HTML DOM iframe 對象表示 HTML 文檔的 <iframe> 元素。

現在讓我們創建 iframe 對象 -

用法

以下是語法 -

document.createElement(“IFRAME”);

特性

以下是 iframe 對象的屬性 -

屬性	解釋
contentDocument	它返回由 iframe HTML 元素生成的文檔對象。
contentWindow	它返回由 iframe HTML 元素生成的 window 對象。
height	它返回並修改 iframe HTML 元素的 height 屬性的值。
name	它返回並修改 iframe HTML 元素的 name 屬性的值。
sandbox	它返回並更改 iframe HTML 元素的 sandbox 屬性值。
seamless	它返回並修改 iframe 是否應該看起來無縫，就像它是網頁的一部分，即沒有邊框和滾動條。
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.com/");
      document.body.appendChild(x);
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

點擊 ”Click me to create an iframe”按鈕來創建一個 iframe -

相關用法

注：本文由純淨天空篩選整理自Sharon Christine大神的英文原創作品 HTML DOM iFrame Object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。