尝试在元素隐藏时删除iframe源

Question

元素隐藏时，我正在尝试删除iframe源

  $(document).ready(function() {
    $("#myModal").is(":hidden",function(){
        $('iframe').attr("src","");
    });

    $("#myModal").is(":visible",function(){
            $('iframe').attr("src","http://google.com");
        });
   });

默认情况下，我创建的模态有一个

style="display:none"

我想发生的是，如果模式被隐藏，则将iframe源为空

<iframe src="">

并在模态可见或以下情况时加载源

style="display:block;"

我尝试了几种方法，但是没有任何效果，想出了上面的一种方法，但是仍然行不通。

Answer 1

如果使用的是Bootstrap模态，则可以参考以下内容： Modal＃Events

然后，您的js代码可以编辑为：

$(document).ready(function() {
    $("#myModal").on("hidden.bs.modal",function(){
        $('iframe').attr("src","");
    });

    $("#myModal").on("shown.bs.modal",function(){
        $('iframe').attr("src","http://google.com");
    });
});

为了使代码清晰可见，您可以编写：

$(document).ready(function() {
    var modal = $("#myModal"), iframe = $('iframe');

    var onhidden = function(){
        iframe.attr("src","");
    };

    var onshown = function(){
        iframe.attr("src","http://google.com");
    };

    modal.on("hidden.bs.modal", onhidden)
         .on("shown.bs.modal", onshown);
 });