子 iframe 中的事件到父窗口中的处理程序
Posted
技术标签:
【中文标题】子 iframe 中的事件到父窗口中的处理程序【英文标题】：Event in a child iframe to a handler in the parent window 【发布时间】：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>
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于子 iframe 中的事件到父窗口中的处理程序的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript，已获取到父元素并且已知该父元素的某子元素的name属性，怎么获取到相应的子元素？
子窗口访问父页面iframe中的iframe，top打开的子窗口访问父页面中的iframe中的iframe