postmessage/cors跨域postMessage、xhr2和xmldomain
2016-06-13 20:16
405 查看
一、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.contentWindowid值获取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();
相关文章推荐
- Codeforces Round #356 (Div. 1)D. Bear and Tower of Cubes【pair使用】
- 在浏览器中输入www.baidu.com后执行的全部过程
- Could not launch “ ”,process launch failed: Security解决
- failed to create jvm error code -4
- Lock+Condition 相对于 wait+notify 的一个优势案例分析
- LightOJ 1236 - Pairs Forming LCM(素因子分解)
- 解决grails上传文件过大,发生异常的问题
- FTP 上传、下载(转自:http://blog.csdn.net/zlb824/article/details/7742959)
- AIDL mm编译问题
- 图片压缩工具Thumbnailator的使用
- Conversion to Dalvik format failed: Unable to execute dex:
- 【HDU】 1788 Chinese remainder theorem again
- resolved – Checking for glibc-devel-2.12-1.7-i686; Not found. Failed
- 通过netstat+rmsock查找AIX端口对应进程
- leetcode 217. Contains Duplicate
- 【HDU】 1787 GCD Again
- rely constraint
- Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE]解决办法
- pthread_cond_wait学习笔记
- jfinal配置rails的数据表