javascript - 关于iframe父子页面通信问题
本文介绍了javascript - 关于iframe父子页面通信问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
父页面index.html结构
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<frameset rows="48px,*" frameborder="0">
<frame src="header.html" frameborder="0">
<frameset cols="25%,75%" frameborder="0">
<frame src="left.html" frameborder="0">
<frame src="content.html" frameborder="0">
</frameset>
</frameset>
</html>content.html页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/master.css" />
<link rel="stylesheet" href="css/layer.css" />
<style>
body{
background: #fff;
}
.button-block>a{
margin: 10px;
padding: 10px;
background: #00B94D;
font-size: 16px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<p>正文内容</p>
<div class="button-block">
<a href="javascript:void(0);">按钮</a>
</div>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js" ></script>
<script type="text/javascript" src="js/layer.js" ></script>
<script>
$(".button-block a").click(function() {
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
});
</script>
</body>
</html>
效果如图
如图所示弹框是显示在子页面内，相对整个html是偏移的
我现在的问题是能不能在index.html页面写content.html里.button-block a 的click事件呢
例如这样
index.html
content.html
解决方案
你试试看
<frame id="iframe" src="content.html" frameborder="0">
$(function () {
$('#iframe').load(function(){
$('#iframe').contents().find('.button-block').click(function () {
alert('click');
});
})
})
这篇关于javascript - 关于iframe父子页面通信问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
