zoukankan      html  css  js  c++  java
  • 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();
    
  • 相关阅读:
    20165334 实验一 Java开发环境的熟悉
    20165334 《java程序设计》第5周学习总结
    20165334《java程序设计》第4周学习总结
    20165334《java程序设计》第三周学习总结
    20165334 预备作业3 Linux及学习
    20165334 学习基础与c语言学习心得
    20165228 实验一 Java开发环境的熟悉
    20165228 2017-2018-2 《Java程序设计》第5周学习总结
    20165228 2017-2018-2 《Java程序设计》第4周学习总结
    20165228 2017-2018-2 《Java程序设计》第3周学习总结
  • 原文地址:https://www.cnblogs.com/leee/p/5515172.html
Copyright © 2011-2022 走看看