How to create an iframe with given HTML dynamically

During development, dynamically creating an iframe with given HTML content is a common requirement that can be used in various scenarios, such as loading third-party content or implementing sandbox environments. Below are the steps and examples for achieving this functionality:

Step 1: Create an empty iframe element

First, create an empty iframe element in HTML or dynamically using JavaScript.

html
<iframe id="myIframe"></iframe>

Or using JavaScript:

javascript
let iframe = document.createElement('iframe');
iframe.id = 'myIframe';
document.body.appendChild(iframe);

Step 2: Write HTML content into the iframe

Next, populate the iframe with HTML content. This can be achieved by accessing the iframe's document object and using either the write method or documentElement.innerHTML.

javascript
let iframe = document.getElementById('myIframe');
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// Method 1: Using document.write()
iframeDoc.open();
iframeDoc.write('<h1>Hello World</h1><p>This is dynamically inserted content.</p>');
iframeDoc.close();

// Method 2: Using innerHTML
iframeDoc.documentElement.innerHTML = '<h1>Hello World</h1><p>This is dynamically inserted content.</p>';

Example: Dynamically creating and populating an iframe

Suppose you want to create a new iframe and load HTML content, such as a simple login form.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example of Dynamically Creating an Iframe</title>
</head>
<body>
    <script>
        // Create iframe
        let iframe = document.createElement('iframe');
        document.body.appendChild(iframe);

        // Access the iframe's document object
        let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

        // Set the iframe's HTML content
        let htmlContent = `\n            <style>\n                body { font-family: Arial, sans-serif; padding: 20px; }\n                input, button { margin-top: 10px; }\n            </style>\n            <h1>Login Form</h1>\n            <form>\n                <label for="username">Username:</label>\n                <input type="text" id="username" name="username"><br>\n                <label for="password">Password:</label>\n                <input type="password" id="password" name="password"><br>\n                <button type="submit">Login</button>\n            </form>\n        `;

        iframeDoc.open();
        iframeDoc.write(htmlContent);
        iframeDoc.close();
    </script>
</body>
</html>

Important Notes

When writing content into the iframe, ensure to use the open() and close() methods to properly reset the document state.
For security, when using external or untrusted HTML content, verify content safety to prevent risks like XSS attacks.
If communication between the iframe and the main page is required, address the restrictions imposed by the same-origin policy.

Through the above steps and examples, you can see that dynamically creating and populating an iframe with HTML content is straightforward and effective. This technique is highly valuable in real-world development, particularly when isolating content or embedding external pages.

2024年8月13日 10:19 回复

1个答案

Step 1: Create an empty iframe element

Step 2: Write HTML content into the iframe

Example: Dynamically creating and populating an iframe

Important Notes

你的答案