问题描述
问题:我无法在模式窗口上本地延迟加载 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 目标。这假设:
- 您将重复使用模态窗口和 iframe HTML 代码。
- 希望每次打开模态时都显示不同的 URL
- 模态窗口 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')"
/>
基本上,该函数希望您传入:
- 当前复选框 -(由this表示)
- 要更改的 iframe 的 ID 确保它是带引号的字符串
- 要加载到 iFrame 中的 URL 也是字符串形式