HTML 使用JavaScript在div中创建iframe

在本文中，我们将介绍如何使用JavaScript动态地在HTML页面中的div中创建一个iframe元素，并提供一些实例说明。

阅读更多：HTML 教程

什么是iframe？

iframe是HTML中的一个元素，用于在一个HTML文档中嵌入另一个HTML文档。通过使用iframe，我们可以在一个HTML页面中显示其他网站的内容，或者嵌入一些外部的HTML文件。

创建iframe

要使用JavaScript在div中创建iframe，我们首先需要获取目标div的引用，然后使用createElement方法来创建一个iframe元素。接下来，我们可以通过设置iframe的属性来自定义它的样式、源和其他属性。最后，我们需要将创建好的iframe元素附加到目标div中。

下面是一个示例，演示了如何使用JavaScript在div中创建一个iframe：

<!DOCTYPE html>
<html>
<head>
    <title>Create Iframe</title>
    <style>
        #iframeContainer {
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="iframeContainer"></div>

    <script>
        // 获取目标div的引用
        var container = document.getElementById("iframeContainer");

        // 创建一个iframe元素
        var iframe = document.createElement("iframe");

        // 设置iframe的属性
        iframe.src = "https://www.example.com";
        iframe.width = "100%";
        iframe.height = "100%";

        // 将iframe附加到目标div中
        container.appendChild(iframe);
    </script>
</body>
</html>

上面的示例中，我们创建了一个id为”iframeContainer”的div，并使用JavaScript在其中创建了一个iframe元素。我们设置了iframe的源为”https://www.example.com”，并将其宽度和高度设置为100%。最后，我们将创建好的iframe元素附加到了目标div中。

修改iframe的属性

我们可以使用JavaScript动态地修改iframe的各种属性，以满足我们的需求。例如，我们可以改变iframe的宽度和高度，修改其源，或者设置其他属性。

下面是一个示例，演示了如何使用JavaScript动态修改iframe的属性：

<!DOCTYPE html>
<html>
<head>
    <title>Modify Iframe</title>
    <style>
        #iframeContainer {
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="iframeContainer">
        <button onclick="changeSource()">Change Source</button>
    </div>

    <script>
        // 获取目标div的引用
        var container = document.getElementById("iframeContainer");

        // 创建一个iframe元素
        var iframe = document.createElement("iframe");

        // 设置iframe的属性
        iframe.src = "https://www.example.com";
        iframe.width = "100%";
        iframe.height = "100%";

        // 将iframe附加到目标div中
        container.appendChild(iframe);

        // 修改iframe的源
        function changeSource() {
            iframe.src = "https://www.newsource.com";
        }
    </script>
</body>
</html>

上面的示例中，我们在目标div中添加了一个按钮，并为按钮添加了一个点击事件处理程序。当用户点击按钮时，JavaScript会调用changeSource函数，该函数会修改iframe的源为”https://www.newsource.com”。