我有一个 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>
最佳答案
我相信这就是您所追求的。您的问题之一是使用 .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>
关于javascript - jquery iframe beforeunload 控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43664109/