Demo Fiddle

Question

有没有办法创建一个非特定的函数来显示点击时的iFrame？

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

这就是我想要解决这个问题的方式：

HTML

<a class="viewFrame">
  <img src="../button.png"/>
</a>

<iFrame class="frame" src="" title="http://linkToiFrame.com"/>

JQUERY

$('viewFrame').on("click", function(){
   $('frame').attr("src", $('frame').attr("title"));
});

/*Will have a function here to remove the attribute
I am unsure as to whether or not I even need to do this, or if I just
hide the iFrame after, this way I don't have to load it multiple times
if the user clicks the link multiple times.*/
$('close').on("click", function(){
  $('frame').attr("src", "");
});

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

感谢任何帮助！

Answer 1

frame 是iframe的类，那么它如何才能使用$('frame')

您需要撰写 $('.frame')

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

Demo Fiddle

Answer 2

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

在PHP中，我有一个可变的数组，因此iframe的源也应该是可变的。另外，我希望在单击<div>打开弹出窗口时加载iframe，因为我感觉到iframe的加载会引起问题。其中一些可能有点题外话。在我的<script>中，我已经有了这段代码

$(".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;

});

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

//...
//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++; ?>

因此，我通过单击openpopup iframe并使用 title 作为 src 的缓存来更改div。

顺便说一句-关闭 div并自动停止 iframe此代码对我有用：

$(".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);
  });
});

没有('clicked', false)语句，弹出窗口将自行打开。

问候！

使用JQuery单击加载iFrame

2 个答案:

Demo Fiddle