子 iframe 中的事件到父窗口中的处理程序答案

【问题标题】：Event in a child iframe to a handler in the parent window子 iframe 中的事件到父窗口中的处理程序
【发布时间】：2018-02-15 00:23:31
【问题描述】：

我的方案是打开一个包含 iframe 的模式，在 iframe 内有按钮，而 onclick 按钮我需要关闭模式并刷新父窗口
到目前为止我尝试过
父页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
  $(document).ready(function(){
    // $('iframe').content ().find('#close').click(function(){
    //   alert('entred');

    // });
    $('#myModal').contents().find('#close').click(function() {
      alert('click');
    });
  });
</script>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <iframe src="modal.html"></iframe>
  </div>

</div>

</body>
</html>

子页面

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="container">
        <p>Hello Session has expeired</p>
        <button id="close" type="button">OK</button>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

在父页面中，更新以下脚本，该脚本将创建一个名为 closeModal 的全局函数，该函数将 1) 关闭模式对话框并 2) 重新加载当前页面。

<script type="text/javascript">
    window.closeModal = function () {
        $('#myModal').modal('hide');
        window.location.reload();
    };
</script>

在子页面中，点击Close按钮，只需调用父页面的closeModal方法即可。

<script type="text/javascript">
    $(document).ready(function () {
        $('#close').click(function () {
            window.parent.closeModal();
        });
    });
</script>

【讨论】：

它的作品谢谢你，你能解释一下它是如何工作的
在父页面中，我创建了可以直接访问#myModal div 的全局方法。然后在子页面中，调用父窗口中注册的全局方法。
非常感谢@PhaniKumarM

【解决方案2】：

您需要为 iFrame 提供一个 ID，然后将处理程序附加到它或其中的一个元素：

document.getElementById("yourIFrameId").contentDocument.addEventListener(...);

【讨论】：

【解决方案3】：

这应该可以满足您的需要：

父页面.html：

<iframe src="iframe.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $(document).on('eventhandler', function() {               
      $('#myModal').modal('hide');
    });
}); 
</script>

ChildPage.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
 $('#close').click(function () {
    parent.$(parent.document).trigger('eventhandler');  
});
</script>

【讨论】：