Fork me on GitHub

李可

导航

postmessage/cors跨域postMessage、xhr2和xmldomain

一、h5 postMessage

node http-server配置服务器

有关配置：请参考我的http://www.cnblogs.com/leee/p/5502727.html
我把文件夹a配置成http://192.168.1.100:8000
文件夹b配置成http://192.168.1.100:7000

父页面获取iframe两种方式

1，window.frames["goalNameFrame"] 这个goalNameFrame是iframe的name值
2，goalFrame.contentWindow id值获取iframe，通过contentWindow 获得

子页面获取父页面两种

1，window.top
2，window.parent

本页面窗口两种,

1，window
2，self

请求，接受

请求：窗口.postMessage()方法参数（数据，域地址）
接受：message事件，e事件对象，e.data发过来的数据 e.origin过来请求的域名

a文件夹a1.htm

<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript">
	window.onload=function(){
		var goalFrame=document.getElementById("goalFrame");
		var btn=document.getElementById("btn");
		btn.onclick=function(){
		//goalFrame.contentWindow通过iframe的id得到window
		//window.frames["goalNameFrame"]通过iframe的name得到window

		//window.frames["goalNameFrame"].document.body.style.background = 'red';
		//goalFrame.contentWindow.document.body.style.background = 'red';

		//第一个参数：发送的数据
		//第二个参数：接收数据的域名｛带上协议｝
		//goalFrame.contentWindow.postMessage("1","http://192.168.1.100:7000/b1.htm");
		window.frames["goalNameFrame"].postMessage("1","http://192.168.1.100:7000/b1.htm");
		};
         //iframe改变parent
		self.addEventListener("message",function(e){
			if (e.data=="2") {
				document.body.style.background = 'green';
			}
		})
 }
	</script>
</head>
<body>
	<iframe id="goalFrame" name="goalNameFrame" src="http://192.168.1.100:7000/b1.htm" ></iframe>
	<button id="btn">变色</button>
</body>
</html>

b文件夹b1.htm

<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript">
		window.onload=function(){
			//window=self
			//top

			//message事件的事件对象下保存了发送过来的内容
			//ev.data : 发送过来的数据
			//ev.origin
			self.addEventListener('message',function(e){
					if (e.data=="1") {
					alert(e.origin)	;	
					document.body.style.background='red';
					//父窗口变绿
					window.top.postMessage('2',"http://192.168.1.100:8000/a1.htm")
					}
			})
		}

	</script>
</head>
<body>
b1
</body>
</html>

二、ajax xmlhttprequest请求跨跨域

发送请求的页面，通过http-server部署到http://192.168.1.100:9005

<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript">
	window.onload=function(){
		var oBtn = document.getElementById('btn');
	oBtn.onclick = function() {
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					alert(xhr.responseText);
				}
			}
		}
		xhr.open('get', 'http://192.168.1.100/WebForm1.aspx', true);
		xhr.send();
	}
 }
	</script>
</head>
<body>
	<button id="btn">xhr2弹出跨域获得的内容</button>
</body>
</html>

要请求的页面，我通过vs将aspx发布到，本地iis http://192.168.1.100

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="server.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
   server
</body>
</html>



namespace server
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://192.168.1.100:9005");
        }
    }
}

注意

google和firefox支持,但ie6 7 8 9不支持。支持ie6 7 8 9的是XDomainRequest

截图


三 、XDomainRequest 支持ie6 7 8 9的是XDomainRequest

https://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
https://developer.mozilla.org/en-US/docs/Web/API/XDomainRequest
这里 67 89 支持 ie10就开始XMLHttpRequest了

var xhr = new XDomainRequst();
		xhr.onload = function() {
			alert(xhr.responseText);
		}
		xhr.open('get', 'http://192.168.1.100/WebForm1.aspx', true);
		xhr.send();

posted on 2016-06-13 20:16  李可在江湖  阅读(832)  评论(0)  编辑  收藏  举报