关于 postMessage 相关描述请参考:
简述html 中的 postMessage
<div id="main_page" class="main_page">
<iframe id="main_frame" name="main_frame" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" style="overflow: hidden;">
</iframe>
</div>
iframe 引入的页面若不是同一个 服务器 的,那么在使用 js 访问 iframe 中的内容时,就会遇到跨域问题。
比如如下访问:
window.top.frames["main_frame"].document
报出的问题如下:
VM18888:1 Uncaught DOMException: Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame.
at <anonymous>:1:33
使用 html5 postMessage 可以有效的解决这个问题,但后面通过测试,html 也是可以的。
代码如下:
iframe 引入的子页面添加如下代码:
<script type="text/javascript">
window.onload = function() {
window.document.onclick = function() {
window.parent.postMessage("click", "*");
};
};
</script>
比如如下子页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<h1>
This is my JSP page. <br>
</h1>
</body>
<script type="text/javascript">
window.onload = function() {
window.document.onclick = function() {
// 向父页面传数据
// 需要注意的是,第一个参数最好是 字符串
window.parent.postMessage("click", "*");
};
};
</script>
</html>
父页面中添加如下代码来接收 iframe 子页面传输的数据:
// 接收 iframe 传回的click事件
window.addEventListener('message', function(e){
//e.data就是子页面传过来的第一个参数,这里就是click
console.log(e.data);
}, false);
这样就可以解决跨域问题了。