(关于跨域通信问题，先要将服务器配置好，添加两个不同域名，方便操作)
一、跨文档消息通信(同域名)
- iframe
01-窗口通信.html
<iframe id="myFrame" src="01-test.html"></iframe>
<!-- 可以通过js去访问被包含页面的DOM元素 -->
<script>
window.onload = function() {
var myIframe = document.getElementById("myFrame");
// 改变子页面的背景
document.onclick = function() {
// 要操作iframe中的dom元素，先获取到iframe引入的window对象 -----> contentWindow
myIframe.contentWindow.document.body.style.background = 'purple';
}
}
</script>
01-test.html
<script type="text/javascript">
window.onload = function(){
var oBt1 = document.getElementById("bt1");
// 改变父页面的背景
document.onclick = function(){
// 要访问父元素的window对象 -----> parent
window.parent.document.body.style.background = 'blue';
}
}
</script>
contentWindow: 父页面访问子页面的window对象
window.parent: 如果当前页面没有被其他页面包含，即parent就是当前页面的window对象；如果被包含了，则parent就是当前页面的父级页面window对象;
window.top: 指的是顶级页面；
- window.open
04-窗口通信.html
<script type="text/javascript">
window.onload = function(){
var oBt1 = document.getElementById("bt1");
var oBt2 = document.getElementById("bt2");
var openW = null;
oBt1.onclick = function(){
// 通过open方法是会返回新建窗口的window对象的
openW = window.open('04-test.html', '_blank');
}
// 改变子页面的背景
oBt2.onclick = function(){
// 即可以通过返回的window对象进行对应操作
openW.document.body.style.background = 'purple';
}
}
</script>
04-test.html
<script type="text/javascript">
window.onload = function(){
var oBt1 = document.getElementById("bt1");
oBt1.onclick = function(){
// window.opener: 通过window.open方法打开当前页面的window对象
window.opener.document.body.style.background = 'red';
}
}
</script>
window.open: 返回的window即是子窗口对象 (子页面)
window.opener: 过window.open方法打开当前页面的window对象 （父页面）
二、跨文档消息通信(不同域名) postMessage
- 发送数据postMessage
可以通过postMessage方法给另外一个窗口发送消息；
操作方式: 接收消息的窗口对象window.postMessage(发送的数据， 接收的域)
var oFrame = document.getElementById('myFrame');
document.onclick = function(){
// 注意写上协议，不然会报错
oFrame.contentWindow.postMessage('123', 'http://www.b.com');
}
oFrame.contentWindow.postMessage('123', '*');即表示接受域没有限制；
- 接收消息事件message
- ev.origin: 发送数据来源的域
- ev.data: 发送的数据
window.onload = function(){
// 监听message事件
window.addEventListener('message', function(ev){
ev = ev || window.ev;
console.log(ev.origin + ':' + ev.data);
});
}
三、跨文档消息通信(不同域名) XMLHttpRequest
- XMLHttpRequest解决跨域问题
在服务端需要设置一个header属性，允许访问该资源的域，例如:
<?php
// 允许访问该资源的域
header('Access-Control-Allow-Origin:http://www.a.com');
echo 'hello';
?>
- 非IE中跨域请求
// 非IE跨域
var request = new XMLHttpRequest();
request.open('GET', 'http://www.b.com/HTML5/b/03-test.php', true);
request.send();
// 可以直接使用onload方法，而不需要onreadystatechange
request.onload = function(){
alert(request.responseText);
}
- IE中跨域请求
// IE跨域
var request = new XDomainRequest();
request.open('GET', 'http://www.b.com/HTML5/b/03-test.php', true);
request.send();
request.onload = function(){
alert(request.responseText);
}
- ajax无刷新上传
<script type="text/javascript">
window.onload = function(){
// <input type="file" id="myFile" />
var oFile = document.getElementById("myFile");
var oBt = document.getElementById("bt");
oBt.onclick = function(){
// 文件列表: oFile.files
var request = new XMLHttpRequest();
request.open('POST', 'upload_file.php', true);
// 上传进度
var oUpload = request.upload;
oUpload.onprogress = function(ev){
ev = ev || window.event;
console.log(ev.total + ":" + ev.loaded);
}
// 设置请求方式
request.setRequestHeader('X-Request-With', 'XMLHttpRequest');
// 通过FormData来构建提交数据(二进制)
var oFormData = new FormData();
oFormData.append('file', oFile.files[0]);
request.send(oFormData);
request.onload = function(){
alert('文件上传成功‘);
}
}
}
</script>
FormData: 将数据格式化对象
var oUpload = request.upload; // 上传相关属性
oUpload.onprogress = function(ev){} // 上传进度相关
ev.total: 待发送的数据大小
ev.loaded: 已发送的数据大小
