Question

我有一个iframe，我在右侧iframe上方有一个关闭按钮，我想在加载后激活它。但是如果它没有加载我想让它变得被动但我不明白为什么我的代码不起作用，实际上我的代码只是......

iframe加载后，我的makeActive功能正在运行，如果没有加载我的makePassive正在处理onunload js events ..我的错是什么？

＆＃13;

function makePassive() {
  $("#kapat").attr("data-status", "pasif");
  $("#kapat").css("background-color", "#ddd");
  $("#request").prop("disabled", true);
}

function makeActive() {
  $("#kapat").attr("data-status", "aktif");
  $("#kapat").css("background-color", "#000");
  $("#request").prop("disabled", false);
}

$(document).ready(function(e) {
  $("#iframe").load(function() {
    makeActive();
  });

  

  document.getElementById("iframe").onunload(makePassive());

  $(".kapat").on("click",function() {
    var status = $(this).attr("data-status");

    if (status == "aktif") {
      alert("it's active");
    }
  });
});

＆＃13;

.iframe-alan {
  width: 800px;
  position: relative;
  border: 1px solid #000;
}

.kapat {
  position: absolute;
  top: -15px;
  right: -15px;
  text-align: center;
  border-radius: 50% 50%;
  background-color: #000;
  border: 1px solid #f00;
  font-size: 20px;
  padding: 15px;
  color: #fff;
  cursor: pointer;
  font-family: tahoma;
}

＆＃13;

<div class="iframe-alan">
<div class="kapat" id="kapat" data-status="aktif">X</div>
<iframe name="iframe" height="600" width="100%" id="iframe" allowtransparency="yes" frameborder="0" src="https://anitur.com.tr"></iframe>
</div>
<input type="button" disabled="disabled" id="request" value="İstek Yap" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

虽然它打败了我，为什么你想要给你的元素命名为iframe，你应该改变这一行

document.getElementById("iframe").onunload(makePassive());

到这个

document.getElementById("iframe").onunload = makePassive;

或者

$("#iframe").unload(makePassive);

DOM事件处理程序与jQuery没有类似的签名。

您还应该将按钮的初始颜色更改为灰色，这样您就可以知道它何时完成加载。

.kapat {
  position: absolute;
  top: -15px;
  right: -15px;
  text-align: center;
  border-radius: 50% 50%;
  background-color: #ddd; /* make it initially grey, then it changes to black when iframe loads */
  border: 1px solid #f00;
  font-size: 20px;
  padding: 15px;
  color: #fff;
  cursor: pointer;
  font-family: tahoma;
}

Answer 2

我相信这就是你要追求的目标。您的一个问题是使用.load jquery事件别名which have been depreciated。我假设目标是让alert("it's active")开火？

＆＃13;

$(document).ready(function(e) {
  function makePassive() {            
    $("#kapat").attr("data-status", "pasif");
    $("#kapat").css("background-color", "#ddd");
    $("#request").prop("disabled", true);
  }

  function makeActive() {
    $("#kapat").attr("data-status", "aktif");
    $("#kapat").css("background-color", "#000");
    $("#request").prop("disabled", false);
  }

  $('#iframe').on('load',function(){
    makeActive();
    $(".kapat").on("click",function() {
        var status = $(this).attr("data-status");

        if (status == "aktif") {
          alert("it's active");
        }
    });
  });
  $('#iframe').on('unload', function(){
      makePassive();
  });
});

＆＃13;

.iframe-alan {
  width: 800px;
  position: relative;
  border: 1px solid #000;
}

.kapat {
  position: absolute;
  top: -15px;
  right: -15px;
  text-align: center;
  border-radius: 50% 50%;
  background-color: #000;
  border: 1px solid #f00;
  font-size: 20px;
  padding: 15px;
  color: #fff;
  cursor: pointer;
  font-family: tahoma;
}

＆＃13;

<div class="iframe-alan">
<div class="kapat" id="kapat" data-status="aktif">X</div>
<iframe name="iframe" height="600" width="100%" id="iframe" allowtransparency="yes" frameborder="0" src="https://anitur.com.tr"></iframe>
</div>
<input type="button" disabled="disabled" id="request" value="İstek Yap" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

我认为由于跨来源限制，您无权听取iframe的unload事件。这意味着您需要手动管理iframe的状态。

$(document).ready(function(e) {
    var status = 'pasif';
    var frame =  document.getElementById("iframe");


    $('#iframe').on('load',function(){
        updateStatus();
        if (status == "aktif") { 
            $(".kapat").on("click",function() { 
                unloadIFrame();
            });
        }
    });

    function unloadIFrame(){        
        frame.src = "about:blank";
        updateStatus();
    }

    function updateStatus() {
        if(frame.src === "about:blank"){//empty iframe
            makePassive();
            status = 'pasif';
        } else {//iframe loaded a page
            makeActive();
            status = 'aktif';
        }
    }
    function makePassive() {
      $("#kapat").attr("data-status", "pasif");
      $("#kapat").css("background-color", "#ddd");
      $("#request").prop("disabled", true);
    }

    function makeActive() {
      $("#kapat").attr("data-status", "aktif");
      $("#kapat").css("background-color", "#000");
      $("#request").prop("disabled", false);
    }
});

jquery iframe beforeunload控件

3 个答案: