Question

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

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

2 个答案: