How do I make < iframes > load only on a button click?

在很多情况下，我们可能不希望一个网页一加载就立即加载所有的 <iframe>。这样做可以提高页面的加载速度，改善用户体验。例如，如果页面中包含视频或其他重内容，我们可以通过仅在用户需要时才加载这些内容来优化性能。

实现这一功能的方法之一是在单击按钮时动态创建 <iframe>。以下是具体实现的步骤和示例代码：

步骤：

1. 创建一个按钮：用户将点击这个按钮来加载 <iframe>。
2. 使用JavaScript监听按钮点击事件：当按钮被点击时，执行一个函数来创建并插入 <iframe>。
3. 动态插入 <iframe>: 在函数中，创建一个新的 <iframe> 元素，并设置其 src 属性为所需的URL，然后将它插入到DOM中的适当位置。

示例代码：

HTML 部分:

html
<button id="loadIframe">加载视频</button>
<div id="iframeContainer"></div>

JavaScript 部分:

javascript
document.getElementById('loadIframe').addEventListener('click', function() {
    var iframe = document.createElement('iframe');
    iframe.src = "https://www.example.com"; // iframe的目标地址
    iframe.width = "560";
    iframe.height = "315";
    iframe.frameBorder = "0";
    iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
    iframe.allowFullscreen = true;

    document.getElementById('iframeContainer').appendChild(iframe);
});

解释：

• 按钮 (<button>)：用户点击这个按钮来触发加载 <iframe> 的功能。
• 事件监听器：当按钮被点击时，监听器会触发一个函数，这个函数负责创建 <iframe> 并设置必要的属性（如 src, width, height, 等）。
• <iframe> 的动态创建与插入：在用户点击按钮后，JavaScript 动态创建 <iframe> 并将其插入到页面的 #iframeContainer 容器中。

这种方法的好处是可以显著减少初始页面加载时的网络请求和加载时间，因为 <iframe> 中的内容仅在用户实际需要时才被加载和渲染。这对于包含多个重量级嵌入内容（如视频，地图等）的页面尤其有用。