动态加载iframe

动态加载iframe是指在页面运行时动态生成一个iframe元素，并把该元素添加到页面中的某个位置。这种技术常用于异步加载外部资源，提高页面性能。

动态加载iframe的完整攻略如下：

1. 创建一个空的iframe元素

<iframe id="myFrame"></iframe>

2. 使用JS动态设置iframe的src属性

const iframe = document.getElementById('myFrame');
iframe.src = 'https://example.com';

3. 等待iframe加载完成

iframe.onload = function() {
  console.log('iframe loaded');
};

以上是动态加载iframe的基本流程。下面提供两条示例说明。

示例1：使用动态加载iframe实现延迟加载广告

<div id="adWrapper"></div>
<button onclick="loadAd()">加载广告</button>

const adUrl = 'https://example.com/ad';
let adLoaded = false;

function loadAd() {
  if (adLoaded) return; // 广告已经加载过了
  adLoaded = true;

  const adWrapper = document.getElementById('adWrapper');
  const iframe = document.createElement('iframe');
  iframe.src = adUrl;
  iframe.onload = function() {
    adWrapper.appendChild(iframe);
  };
}

以上代码实现了一个按钮触发加载广告的功能，并且如果广告已经加载过了，就不会再加载第二次。注意，延迟加载广告可以有效提高页面的性能，但是也要考虑用户的体验，一定要合理安排广告的加载时间和方式，避免影响用户的操作。

示例2：使用动态加载iframe实现异步加载iframe内容

<div id="myFrameWrapper"></div>
<button onclick="loadIframe()">加载iframe</button>

const iframeUrl = 'https://example.com/iframe';
let iframeLoaded = false;

function loadIframe() {
  if (iframeLoaded) return; // iframe已经加载过了
  iframeLoaded = true;

  const iframeWrapper = document.getElementById('myFrameWrapper');
  const iframe = document.createElement('iframe');
  iframe.src = iframeUrl;
  iframe.onload = function() {
    // 这里使用setTimeout模拟异步加载iframe内容
    setTimeout(function() {
      iframe.contentDocument.body.innerHTML = '<h1>异步加载的内容</h1>';
    }, 1000);
    iframeWrapper.appendChild(iframe);
  };
}

以上代码动态加载一个iframe元素，并在iframe加载完成之后使用setTimeout模拟异步加载iframe的内容。在实际应用中，异步加载iframe的内容可能是从服务器获取数据、渲染图表等复杂操作。通过动态加载iframe，可以把这些操作独立出来，避免页面阻塞，提高用户体验。