iframeがロードされているときに変更が選択されたときに確認する

Question

iframeにclass = "iframe"があり、ナビゲーションバーに4つの要素が含まれている3つのオプションの下にそれぞれ3つのオプションが含まれます。メッセージを確認して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を作成するためにjqueryのを使用してロードではなく、されたかどうかを確認するために簡単なチェックを行うことができます

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

Answer 2

ロード時に機能します。ここで説明したように別の方法がありますが、最初の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 
    } 
});