子窗体中的事件到父窗口中的处理程序

时间:2017-09-06 13:21:19

标签: javascript jquery html iframe

我的方案是打开一个包含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>

3 个答案:

答案 0 :(得分:1)

在父页面中,更新以下脚本,该脚本将创建一个名为closeModal的全局函数,该函数将关闭模态对话框和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>

答案 1 :(得分:0)

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

     if((numbytes=recv(sockfd, buf1, wGetLen, 0)) != -1)
     {
         printf("%s %d\n",buf1,numbytes);
         memset(buf1, 0, sizeof(buf1));                                
     }
     else if (errno == EAGAIN)
     {
         printf("no data to receive\n");
     }
     else
     {
         perror("error on recv");
     }    

答案 2 :(得分:0)

这应该做您所需要的:

ParentPage.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>