1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function parentResponse() {
alert('parentResponse');
}
//html5
var onmessage = function(e) {
console.dir(e);
parentResponse();
};
//
$(function(){
//dom
$('#callChild').click(function(){
window.frames["inframe"].childResponse();
window.frames["inframe"].postMessage("parentCall", "*");
});
//html5
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
});
</script>
</head>
<body>
<iframe src="call.html" id="inframe" name="inframe"></iframe>
<button id="callChild">call child</button>
</body>
</html>
2.call.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function childResponse() {
alert('childReponse');
}
//html5
var onmessage = function(e) {
console.dir(e);
childResponse();
};
//
$(function(){
$('#callParent').click(function(){
var frame = window.parent;
while(frame != frame.parent && frame.name != "app_frame") {
frame=frame.parent;
}
frame.parentResponse();
//html5
frame.postMessage("childCall", "*");
});
//html5
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
});
</script>
</head>
<body>
<button id="callParent">call parent</button>
</body>
</html>