仅在触发 Modal 后才延迟加载 iframe

分类：编程问答

如何解决仅在触发 Modal 后才延迟加载 iframe

问题：我无法在模式窗口上本地延迟加载 iframe。当我在检查元素 > 网络中检查瀑布时，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>

解决方法

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

您可以通过将 iFrame 添加到 DOM 或在打开模态窗口之前修改 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 目标。这假设：

  1. 您将重复使用模态窗口和 iframe HTML 代码。
  2. 希望每次打开模态时都显示不同的 URL
  3. 模态窗口 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 和 URL 的任何组合

和复选框 HTML 到： （注意：同样的功能可以应用于按钮、链接等）

<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')" 
/>

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

  1. 当前复选框 -（由this表示）
  2. 要更改的 iframe 的 ID 确保它是带引号的字符串
  3. 要加载到 iFrame 中的 URL 也是字符串形式

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot