iframe跨域解决方案-2(postMessage)

最新推荐文章于 2024-05-08 11:30:21 发布

believe-xin

最新推荐文章于 2024-05-08 11:30:21 发布

阅读量136

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_23986087/article/details/115833755

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.父域页面(a.html)：act/msg/evalStr 为自定义属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <input type="text" id="textValue"/>
    <input type="button" value="获取跨域的页面内容" onclick="method1()"/>
    <br/>
    <hr/>
    <iframe src="http://127.0.0.1:8821/b.html" width="500" height="500" id="iframe1" name="iframe1"></iframe>
<script>
function method1(){
 	var frm = document.getElementById("iframe1");
    frm.contentWindow.postMessage({
        act: 'article',  // 自定义的消息类型、行为，用于switch条件判断等。。
        msg: {
        	evalStr: 'alert("跨域成功！")'
        }
    },"*");
}
var OnMessage = function (e) {
	if (e.data.act == 'response') {
		var textValue = document.getElementById("textValue");
		textValue.value=e.data.msg.reportFormId;
    } else {
        alert('未定义的消息: '+ e.data.act);
    }
}
if (window.addEventListener) {  // all browsers except IE before version 9
    window.addEventListener("message", OnMessage, false);
} else {
    if (window.attachEvent) {   // IE before version 9
    	window.attachEvent("onmessage", OnMessage);
    }
}
</script>
</body>
</html>

2.子域页面（b.html）:

<!DOCTYPE html>
<html>
<head>
	<title>子域</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=width-device,initial-scale=1.0,user-scalable=no" />
</head>
<body>
<div><h1>这是子域内容</h1></div>
<script>
var reportFormId = 'www.thunisoft.com';
var OnMessage = function (e) {
	if (e.data.act == 'article') {
		//触发编辑页面的保存事件或者添加eval方法
		eval(e.data.msg.evalStr);
        // 向父窗框返回响应结果
        window.parent.postMessage({ 
            act: 'response',
            msg: {
            	reportFormId: reportFormId //报表id
            }
        }, '*');
    } else {
        alert('未定义的消息: '+ e.data.act);
    }
}
if (window.addEventListener) {  // all browsers except IE before version 9
    window.addEventListener("message", OnMessage, false);
} else {
    if (window.attachEvent) {   // IE before version 9
    window.attachEvent("onmessage", OnMessage);
    }
}
</script>
</body>
</html>