確認何時加載iframe時選擇更改

Question

我有一個iframe與class =「iframe」和4個元素的導航欄3其中包含3個選項它們中的每個在iframe中打開指定的網址， 第四個元素是確認消息後關閉iframe。 我想要什麼：如果用戶選擇任何子元素，而iframe已經加載請先詢問他是否要離開，如果答案爲true，則允許他加載選定的子元素，如果答案爲false則什麼也不做。 這是我嘗試：

$(document).ready(function(){ 
 
    $(".close").click(function(){ 
 
    if (confirm("Are you sure you want to close?") == true) { 
 
     $('.iframe').hide(); 
 
    }else{ 
 
    } 
 
    }); 
 
    $('.iframe').on('load', function(){ 
 
    $('.subElement').click(function(){ 
 
     if (confirm("Are you sure you want to leave?") == true) { 
 
     }else { 
 
     $('.subElement').preventDefault(); 
 
     } 
 
    }); 
 
    }); 
 
});

.nav ul li { 
 
    display:inline-block;vertical-align:top; 
 
} 
 
.nav ul li ul li{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <ul calss="main_ul"> 
 
    <li><a href="#">element1</a> 
 
     <ul> 
 
     <li><a class="subElement" href="#">subElement1</a></li> 
 
     <li><a class="subElement" href="#">subElement2</a></li> 
 
     <li><a class="subElement" href="#">subElement3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">element2</a> 
 
     <ul> 
 
     <li><a class="subElement" href="#">subElement1</a></li> 
 
     <li><a class="subElement" href="#">subElement2</a></li> 
 
     <li><a class="subElement" href="#">subElement3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">element3</a> 
 
     <ul> 
 
     <li><a class="subElement" href="#">subElement1</a></li> 
 
     <li><a class="subElement" href="#">subElement2</a></li> 
 
     <li><a class="subElement" href="#">subElement3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> <a class="close" href="#">close iframe url</a></li> 
 
    </ul> 
 
</div> 
 

 
<br> 
 
<iframe class= "iframe" src="http://stackoverflow.com"> width="300" height="200"></iframe>

Answer 1

你幾乎沒有！這是我改變，使其工作：

$('.iframe').on('load', function(){ 
    $('.subElement').click(function(){ 
    if ($('.iframe').is(':visible')){ 
     if (confirm("Are you sure you want to leave?") == true) { 
     }else { 
      return false; 
     } 
    } 
    }); 
}); 

或一個簡單的版本：

$('.iframe').on('load', function(){ 
    $('.subElement').click(function(){ 
    if ($('.iframe').is(':visible')){ 
     if (!confirm("Are you sure you want to leave?")) { 
      return false; 
     } 
    } 
    }); 
}); 

Answer 2

你也可以做一個簡單的檢查，看看是否iframe中加載，而不是使用jQuery創建裝載時的功能。這裏有另一種如你所描述的方式，但請注意，第一個if語句會檢查iframe是否可見並加載。所以如果你想改變這個，取決於你是否想要顯示一條消息，如果iframe加載，但隱藏。

希望這會有所幫助。 :)

$('.subElement').click(function(){ 
    var iframe = document.getElementsByClassName('iframe'); 
    if(iframe[0].readyState == 'complete' && iframe[0].style.display != "none"){ 
    //If iframe is open: 
    if (!confirm("Are you sure you want to leave?")) { 
     $(this).preventDefault(); 
     } 
    }else{ 
    //If Iframe is not open 
    } 
});