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方法,以及过滤器.模型绑定等等,想想 ...
随机推荐
- python容器数据类型的特色
python容器数据类型的特色 list: 可变数据类型(不可哈希), 有序, 可索引获取, 可修改 Dict: 可变数据类型(不可哈希), 3.6版本有序, 可通 ...
- C，C#，Java：枚举类型
#include <stdio.h> main() { // 枚举默认从0开始,这里指定为1起头 , Tues, Wed, Thurs, Fri, Sat, Sun } day; scan ...
- SQL注入之代码层防御
[目录] 0x0 前言 0x1 领域驱动的安全 1.1 领域驱动的设计 1.2 领域驱动的安全示例 0x2 使用参数化查询 2.1 参数化查询 2.2 Java中的参数化语句 2.3 .NET(C#) ...
- solr 打分和排序机制(转载)
以下来自solr in action. 包含: 词项频次.查询词项出现在当前查询文档中的次数. 反向文档频次.查询词项出现在所有文档总的次数. 此项权重. 标准化因子: 字段规范: 文档权重. 字段权 ...
- [Unity动画]03.动画事件
1.找到动画,添加动画事件 2.在脚本中添加回调方法 TestAnimator.cs using UnityEngine; public class TestAnimator : MonoBehavi ...
- ELK学习博客
ELK实时日志分析平台环境部署--完整记录 https://www.cnblogs.com/kevingrace/p/5919021.html
- 《算法》第二章部分程序 part 5
▶ 书中第二章部分程序,加上自己补充的代码,包括利用优先队列进行多路归并和堆排序 ● 利用优先队列进行多路归并 package package01; import edu.princeton.cs.a ...
- PHP微信公共号授权，获取openid、unionid。
/** * 获取code * @return code code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期 */ publ ...
- Python3里查看某一元素的源码(检查元素定位是否准确)
#coding:utf-8 #显示网页元素的HTML源码from selenium import webdriver driver = webdriver.Ie()driver.implicitly_ ...
- leetcode1014
这道题暴力算法,会超时: class Solution(object): def maxScoreSightseeingPair(self, A: 'List[int]') -> int: n ...