title: jquery iframe beforeunload control
body: <p>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..</p>
  
  <p>After iframe load my <code>makeActive</code> function is working and if it's not loading my <code>makePassive</code> is working with <code>onunload</code> js events..where is my fault ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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");
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="iframe-alan"&gt;
  &lt;div class="kapat" id="kapat" data-status="aktif"&gt;X&lt;/div&gt;
  &lt;iframe name="iframe" height="600" width="100%" id="iframe" allowtransparency="yes" frameborder="0" src="https://anitur.com.tr"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;input type="button" disabled="disabled" id="request" value="İstek Yap" /&gt;
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>