仅在触发模态后才延迟加载 iframe

Question

问题：我无法在模式 window 上本机延迟加载 iframe。当我在 Inspect element > Network 中检查瀑布时，iframe 会立即加载。

目标：iframe 应在触发模式时仅加载。你能帮忙吗？

我不使用像jQuery这样的依赖项，但是javascript如果它提供了解决方案就可以了。我尝试了本机和其他几种延迟加载解决方案，但均未成功。

我的代码：

.modal-state {
  display: none
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible
}

.modal-state:checked+.modal .modal__inner {
  top: 0
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: #f2f2f2;
  transition: opacity .01s ease;
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer
}

.modal__inner {
  transition: top .01s ease;
  height: max-content;
  position: relative;
  max-width: 1200px;
  width: -webkit-fill-available;
  margin: auto;
  padding: 1em 1em;
}

.modal__close {
  position: absolute;
  right: 1.1em;
  top: 0;
  /*-.3em*/
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  z-index: 1
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #999;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #000
}

.modal__close:before {
  transform: rotate(-45deg)
}

.container-pay {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.responsive-iframe-pay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

<p>In our <label for="modal-store">merchandize store</label>.</p>


<input class="modal-state" id="modal-store" type="checkbox" />

<div class="modal">
  <label class="modal__bg" for="modal-store"></label>
  <div class="modal__inner"><label class="modal__close" for="modal-store"></label>
    <p>
      <div class="container-pay">
        <iframe loading="lazy" class="responsive-iframe-pay" src="https://store.website.com"></iframe>
      </div>
    </p>
  </div>
</div>

Answer 1

iFrame 在呈现的 HTML DOM 中遇到时加载。由于您的 iFrame 作为初始加载代码的一部分存在，因此当解析器命中 HTML.

的那部分时，它将加载

您可以通过将 iFrame 添加到 DOM 或在模式 window 打开之前修改 URL 来阻止初始加载操作。

修改 <iframe src="" /> 可能是最好的解决方案，因为它会在显示模式的任何额外时间保留加载的内容。

您可以通过向复选框添加“onchange”事件来做到这一点，该事件将运行 javascript 更改 iframe 的 src 属性。

确保将 iframe 上的 src 更改为空字符串""，这样它就不会尝试立即加载任何内容。

var toggle = document.getElementById('modal-store');
var frame = document.getElementById('the-iframe');
var urlTarg = "https://google.com";
// put the page you want to load in the frame in the urlTarg

function toggleModal() {
  if(toggle.checked && frame.src != urlTarg){
     frame.src = urlTarg;
  }
}

.modal-state {
      display: none
    }

    .modal-state:checked+.modal {
      opacity: 1;
      visibility: visible
    }

    .modal-state:checked+.modal .modal__inner {
      top: 0
    }

    .modal {
      opacity: 0;
      visibility: hidden;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      text-align: left;
      background: #f2f2f2;
      transition: opacity .01s ease;
      z-index: 7;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto
    }

    .modal__bg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      cursor: pointer
    }

    .modal__inner {
      transition: top .01s ease;
      height: max-content;
      position: relative;
      max-width: 1200px;
      width: -webkit-fill-available;
      margin: auto;
      padding: 1em 1em;
    }

    .modal__close {
      position: absolute;
      right: 1.1em;
      top: 0;
      /*-.3em*/
      width: 1.1em;
      height: 1.1em;
      cursor: pointer;
      z-index: 1
    }

    .modal__close:after,
    .modal__close:before {
      content: '';
      position: absolute;
      width: 2px;
      height: 1.5em;
      background: #999;
      display: block;
      transform: rotate(45deg);
      left: 50%;
      margin: -3px 0 0 -1px;
      top: 0
    }

    .modal__close:hover:after,
    .modal__close:hover:before {
      background: #000
    }

    .modal__close:before {
      transform: rotate(-45deg)
    }

    .container-pay {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
      padding-top: 56.25%;
      /* 16:9 Aspect Ratio */
    }

    .responsive-iframe-pay {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    <p>In our <label for="modal-store">merchandize store</label>.</p>

    <input class="modal-state" id="modal-store" type="checkbox" onchange="toggleModal" />

    <div class="modal">
      <label class="modal__bg" for="modal-store"></label>
      <div class="modal__inner"><label class="modal__close" for="modal-store"></label>
        <p>
          <div class="container-pay">
            <iframe id="the-iframe" loading="lazy" class="responsive-iframe-pay" src=""></iframe>
          </div>
        </p>
      </div>
    </div>

编辑：应用于在同一 iframe 中显示内容的多个不同按钮

您可以将其应用到同一页面或同一网站上的多个 iframe 目标，只需稍作修改。这假设：

您将重复使用模式 window 和 iframe HTML 代码。
你想在每次打开模式时显示不同的URL
模态 window HTML 存在于您想要模态 + iframe 的每个 HTML 页面上。

您可以将 Javascript 修改为如下内容：

    // you'll pass all the required values to the function

    function toggleModal(checkbox, frameTarg, urlTarg) {
      var frame = document.getElementById(frameTarg);
      if(checkbox.checked && frame.src != urlTarg){
         frame.src = urlTarg;
      }
    }

每个父页面只需要 javascript 一次，因为同一功能可用于复选框、iframe 和 URLs

的任何组合

复选框 HTML 用于：（注意：相同的功能可以应用于按钮，link，等等）

<input class="modal-state" 
   id="modal-store" 
   type="checkbox" 
   onchange="toggleModal(this, 'the-iframe', 'https://theurltoloadinframe.com')" 
/>

<input class="modal-state2" 
   id="modal-store" 
   type="checkbox" 
   onchange="toggleModal(this, 'iframe2', 'https://someotherurltoload.com')" 
/>

基本上，该函数希望您传入：

当前复选框-（由this表示）
您要更改的 iframe 的 ID 确保它是带引号的字符串
您要在 iFrame 中加载的 URL 也是一个字符串

仅在触发模态后才延迟加载 iframe

Lazy Load Iframe Only After Modal is Triggered

css

iframe

lazy-loading

modal-window

编辑：应用于在同一 iframe 中显示内容的多个不同按钮