javascript - 如果 iframe 已加载，则确认何时选择更改

Question

我有一个 class = "iframe"的 iframe 和带有 4 个元素的导航栏，其中 3 个元素下面包含 3 个选项，每个选项在 iframe 中打开一个指定的 url， 第四个元素是确认消息后关闭 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;
        }
    }
  });
});