提问人：Myky 提问时间：11/1/2023 更新时间：11/1/2023 访问量：49
仅加载 iframe 一次，并使用 toggle 事件将其隐藏
Load iframe only one time, and hide it with toggle event
问：
我有不同的 iframe，但它变慢了。我希望 iframe 仅在单击按钮时加载。然后隐藏/显示带有切换事件的 iframe。 代码示例：
<script>
$(document).ready(function(){
$("#button2").click(function(){
$("#iframecon").toggle();
});
});
</script>
<input type="checkbox" id="button2" onClick='document.getElementById("iframe2").src="/page1.php";'>
<div id="iframecon">
<iframe id="iframe2" width="100%" height="100%"></iframe>
</div>
我该怎么做？谢谢
答：
0赞
zGilexx
11/1/2023
#1
你可以尝试这样的东西：
<script>
$(document).ready(function(){
$("#button2").click(function(){
var iframe = $("#iframe2");
if (iframe.attr("src") === "") {
iframe.attr("src", "/page1.php");
}
$("#iframecon").toggle();
});
});
</script>
<input type="checkbox" id="button2">
<div id="iframecon" style="display: none;">
<iframe id="iframe2" src="" width="100%" height="100%"></iframe>
</div>
检查 iframe 的 src
评论
0赞
Mark Schultheiss
11/1/2023
这需要 2 次点击才能最初显示 - 这没关系，但应该注意的是，第一个设置 src 属性，然后第二个（复选框是否选中）显示 iframe，因为 src 现在已填充。
1赞
Mark Schultheiss
11/1/2023
#2
您可能想要事件而不是点击;jQuery 会将其作为“一个”事件触发器处理，但标准 JavaScript 将添加两个事件侦听器，因此我们应该只使用一个（更改）change
请注意，这假设在这两个 URL 中都有一个硬编码的 URL，但我还添加了一些“html”来注入这个演示。
例子：
jQuery 示例：
在这里，我最初隐藏它，然后在设置 src 值后切换。
$(function() {
const htmlString = "<h1>content</h1><p>hi there!";
const $frm = $("#iframe2");
$frm.hide();
$("#button2").on('click, change', function(event) {
const srcU = "someurlhere";
if ($frm.attr("src") !== srcU) {
// just for this demo
$frm.attr("src", "data:text/html;charset=utf-8," + escape(htmlString))
// using an actual URL string:
// $frm.attr("src", srcU);
}
$frm.toggle();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="button2">
<div id="iframecon">
<iframe id="iframe2" width="100%" height="100%"></iframe>
</div>通用 JavaScript：
在这里，我使用一个类并在 HTML 中设置它，以便它最初被该 CSS 隐藏;然后，如果选中复选框以删除该类，则切换该类，如果未选中则添加该类，以便隐藏跟随 X/checked 显示，未选中隐藏。
另一种方法是在 iframe 上设置一个数据集值，然后放入 CSS 以反映该值的显示/隐藏，例如除“true”或尚未设置以外的任何值都会隐藏它（CSS 的顺序依赖关系很重要）#iframe2{display:none;} #iframe2[data-showme="true"]{display:block;}
const toggleCheck = document.querySelector("#button2");
// just to show the content IS added; same as src with a URL but I just inject some
const htmlString = "<h1>content</h1><p>hi there!";
function handleEvent(event) {
const ifrm = document.querySelector("#iframe2");
const srcU = "someurlhere";
const isSet = ifrm.src === srcU;
if (!isSet) {
// just for this demo
ifrm.src = "data:text/html;charset=utf-8," + escape(htmlString);
// ifrm.src = srcU;
}
ifrm.classList.toggle('hidden', !event.target.checked);
}
toggleCheck.addEventListener('change', handleEvent, false);.hidden {
display: none;
}<input type="checkbox" id="button2">
<div id="iframecon">
<iframe id="iframe2" width="100%" height="100%" class="hidden"></iframe>
</div>评论
0赞
Mark Schultheiss
11/1/2023
注意：还有一种可能性是，您需要在此代码中添加一些在实际加载 iframe 内容时触发事件的内容，然后显示它。参考资料：stackoverflow.com/q/3142837/125981
评论