javascript - jquery iframe beforeunload 控件

Question

我有一个 iframe，并且右 iframe 顶部有关闭按钮，我想在加载后使其处于事件状态。但如果未加载，我想使其处于被动状态，但我不明白为什么我的代码不这样做工作，实际上我的代码很简单..

iframe 加载后，我的 makeActive 函数正在工作，如果它没有加载，我的 makePassive 正在处理 onunload js 事件..我的在哪里故障？

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

.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;
}

<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>

Answer 1

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

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

.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;
}

<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>