подтвердить, когда изменения выбраны, если iframe загружен

Question

У меня есть iframe с классом = «iframe» и панель навигации с 4 элементами. 3 из них содержат 3 варианта под ним, каждый из которых открывает указанный URL в iframe, и 4-й элемент для закрытия iframe после подтверждения сообщения. что я хочу: если пользователь выбирает какой-либо подэлемент, в то время как iframe уже загружен, спросите его сначала, если он хочет уйти, если ответ истинный позволяет ему загрузить выбранный вспомогательный элемент, если ответ ложным ничего не делает. это то, что я стараюсь:

$(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-statement проверяет, является ли 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 
    } 
});