HTML DOM IFrame Object: คุณสมบัติและตัวอย่าง

HTML DOM IFrame Object แทนอิลิเมนต์ <iframe> ใช้สร้างและควบคุม iframe ผ่าน JavaScript

รูปแบบการสร้าง (Syntax)

document.createElement("IFRAME");

คุณสมบัติหลัก (Properties)

ตัวอย่างการใช้งาน

สร้าง 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; display: block; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง DOM IFrame Object</h1>
    <button onclick="createIframe()" class="btn">คลิกเพื่อสร้าง iframe</button>
    <script>
        function createIframe() {
            var iframe = document.createElement("IFRAME");
            iframe.setAttribute("src", "https://tutorialspoint.com/");
            document.body.appendChild(iframe);
        }
    </script>
</body>
</html>

การเข้าถึงเนื้อหาใน iframe (Cross-origin)

เนื่องจากข้อจำกัด Same-Origin Policy จึงไม่สามารถเข้าถึง contentDocument หรือ contentWindow ของ iframe จากโดเมนต่างกันได้ ต้องใช้ postMessage() แทนสำหรับการสื่อสารข้ามโดเมน