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();
postmessage/cors跨域postMessage、xhr2和xmldomain的更多相关文章
- javascript:cors跨域postMessage、xhr2和xmldomain
一.h5 postMessage node http-server配置服务器 有关配置:请参考我的http://www.cnblogs.com/leee/p/5502727.html 我把文件夹a配置 ...
- 使用postMessage实现跨域 解决'Failed to execute 'postMessage' on 'DOMWindow''
使用iframe+postMessage解决跨域问题,首先来过一遍其中的原理咯 原理: 发送方使用postMessage方法向接收方推送消息,第一个参数为推送的内容,第二个参数是允许被访问的域名: 接 ...
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...
- Html5 postMessage实现跨域消息传递
一.同源策略 要理解跨域,我们首先要知道什么是同源策略.百度百科上这样定义同源策略:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略, ...
- jsonp与cors跨域的一些理解（转）
CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...
- 如何在ASP.NET Core中实现CORS跨域
注:下载本文的完整代码示例请访问 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core 如何在ASP.NET C ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- Web APi之手动实现JSONP或安装配置Cors跨域（七）
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
- Web API 实现JSONP或者安装配置Cors跨域
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
随机推荐
- oracle基础语句学习
1.寻找公司所有部门信息 select * from dept; 2.寻找特定列 select dept_name from dept; 3.使用列别名 基本书写方法:列名 列别名 列名 as 列别名 ...
- VS2008自定义快捷键设置
点[Keyboard..]
- rsync+inotfiy文件同步
rsync+inotfiy文件同步 1.部署rsync服务 yum install rsync #安装rsync,如果嫌yum版本过低也可以源码安装 2.vim /etc/rsyncd.conf #默 ...
- 关于MySQL中pymysql安装的问题。
一 一般情况下我们直接在终端输入: pip3 install pymysql 就能够自动安装成功. 但是有时候我们必须先指定一个python解释器: 比如我们指定python3 在终端cmd输入:py ...
- SP1812 LCS2 - Longest Common Substring II
能匹配上子串的节点对它的所有parent都有贡献 在树上转移即可 #include<cstdio> #include<algorithm> #include<cstrin ...
- redis中key过期事件
刚到新公司一个月左右,有个新需求,想做定时任务,比如在用户注册时间的3天后推送用户一条消息. 从刚开始脑子里面闪现的数据库轮询,立马否定掉(浪费资源),再到linux系统的定时任务,但是当用户量过大时 ...
- day6需要记忆（元组字典集合）
一:基本使用:(元组 tuple)优先掌握的操作1.按索引取值(正向取+反向取):只能取2.切片(顾头不顾尾,步长)3.长度 len()4.成员运算in和not in5.循环需要掌握的操作1.cou ...
- 【死磕 Spring】—— IoC 之深入理解 Spring IoC
本文主要基于 Spring 5.0.6.RELEASE 摘要: 原创出处 http://svip.iocoder.cn/Spring/IoC-intro/ 在一开始学习 Spring 的时候,我们就接 ...
- ubuntu 16042 安装过程
IDE接口的硬盘被称为hd SCSI和SATA接口的硬盘则被称为sd 第1块硬盘称为sda, 第2块硬盘称为sdb 一块硬盘最多有4个主分区,主分区以外的分区称为扩展分区,硬盘可以没有扩展分区,但是一 ...
- Java图片压缩
package com.test; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGIma ...