Javascript 使用JQuery在单击时加载iFrame

有没有一种方法可以创建一个非特定的函数来在单击时显示iFrame

我的理由是，我有几个iFrame链接到其他一些页面，它不需要浏览器一开始就加载所有页面，而是根据请求加载它们

这就是我思考的方式：

HTML

我很想知道这是否是一种实用的方法，或者是否有更好的方法

感谢您的帮助

frame是iframe的类，那么它如何仅使用$'frame'

您需要写入$'.frame'

---

基于这个问题，我刚刚为自己的问题想出了一个解决方案，也许它对任何人都有帮助

在PHP中，我有一个可变的数组，因此iframe的源也应该是可变的。 我还希望在单击打开弹出窗口时加载iframe，因为我感觉加载iframe会导致问题。其中一些可能有点离题。 在我的电脑里，我现在有了这个代码

$(".openpopup").click(function (e) {

  e.preventDefault();
  $(".openpopup").data('clicked', true);
  $(".openpopup").fadeOut('slow');
  $('#' + this.id+".popup").fadeIn('slow');

  // fill iframe src with iframe title
  document.getElementById('trailerID'+this.id).src = document.getElementById('trailerID'+this.id).title;

});

我在弹出div中的iframe如下所示：

//...
//php and html code to create the $array and the other components of my content 
//...
  <iframe id="trailerID<?php echo $i;?>" width="560" height="315" src="" title="https://www.youtube.com/embed/<?php echo $array[$i]["trailer_youtube_id"];?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
//more code and <?php $i++; ?> 

如果没有“clicked”（单击），则弹出窗口会自动打开

---

你好

你能为我做小提琴吗that@PitaJ对于加载方面。。。引述问题：我的理由是，我有几个iFrame链接到其他页面，而不是一开始就要求浏览器加载所有页面，而是根据请求加载。你所做的似乎很好，但是源的数据属性似乎比使用标题更合适。@adeneo关闭有什么问题吗？因为我还将隐藏可见性。我想我更关心的是浏览器。。。如果我在用户再次单击时删除src，它会重新加载iFrames src还是仍然被缓存？我应该做一次加载，否则显示？

'.' is used for classes and '#' for id's

$(".openpopup").click(function (e) {

  e.preventDefault();
  $(".openpopup").data('clicked', true);
  $(".openpopup").fadeOut('slow');
  $('#' + this.id+".popup").fadeIn('slow');

  // fill iframe src with iframe title
  document.getElementById('trailerID'+this.id).src = document.getElementById('trailerID'+this.id).title;

});

//...
//php and html code to create the $array and the other components of my content 
//...
  <iframe id="trailerID<?php echo $i;?>" width="560" height="315" src="" title="https://www.youtube.com/embed/<?php echo $array[$i]["trailer_youtube_id"];?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
//more code and <?php $i++; ?> 

$(".close").click(function () {
  $(".openpopup").fadeIn("slow");
  $(".popup").hide();
  $(".openpopup").data('clicked', false);
  $('iframe').each(function(){
       var el_src = $(this).attr("src");
       $(this).attr("src",el_src);
  });
});