jquery iframe beforeunload control

Question

I have a iframe and I have close button top of the right iframe and I want to make it active after load.but if it's not loaded I want to make it passive but I don't understand why my code doesn't work and actually my code is simply..

After iframe load my makeActive function is working and if it's not loading my makePassive is working with onunload js events..where is my fault ?

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

Though it beats me why you would want to name give your element an id of iframe, You should change this line

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

to this

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

or this

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

DOM event handlers don't have a similar signature to jQuery.

You should also change the initial color of your button to grey, so you can tell when it's done loading.

.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

I believe this is what you are going after. One of your issues was using the .load jquery event alias which have been depreciated. I am assuming the goal is to get alert("it's active") to fire?

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

Answer 3

I believe due to cross-origin restrictions you do not have access to hearing the unload event of iframe. That means that you will need to manage the state of the iframe manually.

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