请求提供点击按钮才加载iframe（页面不自动加载）的JSFiddle示例

没问题，我帮你搞定这个需求——让iframe只在点击按钮时才加载，页面初始化时完全不自动加载。咱们先理清楚核心逻辑，再上代码：

浏览器的默认行为是：只要iframe标签带有src属性，页面初始化时就会自动发起请求加载目标地址。所以要实现点击才加载，关键就是初始化时不给iframe设置src，把目标URL存在自定义属性（比如data-src）里，等用户点击按钮时再把这个URL赋值给iframe的src属性。

<button id="loadIframeBtn">点击加载iframe</button>
<iframe id="targetIframe" data-src="https://example.com" width="600" height="400" frameborder="0"></iframe>

<style>
#targetIframe {
  margin-top: 20px;
  border: 1px solid #eee;
}

#loadIframeBtn {
  padding: 8px 16px;
  cursor: pointer;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background 0.2s;
}

#loadIframeBtn:hover:not(:disabled) {
  background: #0056b3;
}

#loadIframeBtn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>

<script>
const loadBtn = document.getElementById('loadIframeBtn');
const iframe = document.getElementById('targetIframe');

loadBtn.addEventListener('click', () => {
  // 避免重复加载，只有当src为空时才执行
  if (!iframe.src) {
    iframe.src = iframe.dataset.src;
    // 加载完成后更新按钮状态，提升用户体验
    loadBtn.disabled = true;
    loadBtn.textContent = 'iframe已加载';
  }
});
</script>

• 初始化不设src：用data-src存储目标URL，这是HTML5的自定义属性，浏览器不会识别它作为加载地址，所以页面初始化时不会有额外请求。
• 防止重复加载：判断iframe的src是否为空，只有第一次点击时才赋值，避免重复触发请求。同时禁用按钮，给用户明确的状态反馈。
• 可扩展性：如果需要加载不同的URL，只需要修改data-src的值，或者在点击事件里动态传入新的URL即可，比如：

  // 示例：点击按钮加载指定的新URL
  loadBtn.addEventListener('click', () => {
    const newUrl = 'https://another-example.com';
    iframe.src = newUrl;
    loadBtn.textContent = '已切换URL';
  });
  

内容的提问来源于stack exchange，提问作者mahesh babu