javascript: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();
javascript:cors跨域postMessage、xhr2和xmldomain的更多相关文章
- postmessage/cors跨域postMessage、xhr2和xmldomain
一.h5 postMessage node http-server配置服务器 有关配置:请参考我的http://www.cnblogs.com/leee/p/5502727.html 我把文件夹a配置 ...
- jsonp与cors跨域的一些理解（转）
CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...
- Web APi之手动实现JSONP或安装配置Cors跨域（七）
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
- Web API 实现JSONP或者安装配置Cors跨域
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
- Web CORS 跨域方式使用方式
CORS 参考 http://enable-cors.org/index.html https://help.aliyun.com/document_detail/oss/practice/cors_ ...
- CORS 跨域 实现思路及相关解决方案
本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CO ...
- jsonp与cors跨域的一些理解
浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个 ...
- Api之Cors跨域以及其他跨域方式
Web Api之Cors跨域以及其他跨域方式(三) 我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还 ...
- CORS跨域资源共享
CORS(跨域资源共享)跨域问题及解决 当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Co ...
随机推荐
- BZOJ 1060: [ZJOI2007]时态同步
Description 一个有根树,你只能进行增加操作,问你将所有叶节点到根的路径权值相同至少需要增加几次. Sol 我也不知道该叫什么算法... 反正就是记录一下到子节点到当前节点的最大距离统计答案 ...
- 如何用angularjs给从后台传来数据添加链接
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF- ...
- CH Round #56 - 国庆节欢乐赛解题报告
最近CH上的比赛很多,在此会全部写出解题报告,与大家交流一下解题方法与技巧. T1 魔幻森林 描述 Cortana来到了一片魔幻森林,这片森林可以被视作一个N*M的矩阵,矩阵中的每个位置上都长着一棵树 ...
- p2p音视频通信
今年音频没事干了,根据业务需求,调研音视频p2p通信,减小服务器压力,一切从0开始. 需要信令服务器,打洞服务器,帮助链接打通双方,实现p2p音视频通信. 服务器和客服端交互等都需要实现. 谷歌web ...
- JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- MySQL学习笔记（2/2）
SQL种类 DDL/DML/DQL/DCL 中括号[]里面的表示可选,大括号{}里面的表示必须从里面选一个,FEILED表示字段. 数据定义语言(DDL):CREATE.DROP.ALTER 用于定义 ...
- Linux服务器jps报process information unavailable
在Linux下执行 jps 是快速查看Java程序进程的命令,一般情况下hadoop,hbase,storm等进程都是通过jps查看,有些时候因为进程没有被正常结束,比如资源占用过大时挂掉或者没有结束 ...
- HTML5实现网页的全屏切换
使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下: //进入全屏 function enterFullScreen() { v ...
- ssh设置
方法一:在/etc/hosts.allow中添加允许ssh登陆的ip或者网段 sshd:192.168.1.2:allowsshd:192.168.1.0/24:allow在/etc/hosts.de ...
- C++ 基础知识复习（一）
数据类型,常量与变量部分:(发现有些点竟然这么多年第一次发现) C++基本数据类型有哪些: 答:整型,浮点型,void型. 注:其他各种数据类型均是这三种类型的扩充,另外void类型在实际程序中经常用 ...