1、跨文档消息传递 (XDM)
跨文档消息传送，指的是在来自不同域的页面间传递消息。主要是针对在页面中通过 iframe 引用其他域的页面。
/*
核心方法：postMessage()
参数一指的是要传送的数据，
参数二指的是传送到的域的地址，可以是 “*” ，即任意域
*/
var iframeWindow = document.getElementById('myiframe').contentWindow();
iframeWindow.postMessage('a secret', 'http://www.wrox.com');
/*
接收到XDM消息时，会触发window对象的message事件
*/
window.onmessage = function(event){
if(event.origin == 'http://www.wrox.com'){
//处理接收到的数据
processMessage(event.data);
//可选：向来源窗口发送回执
event.source.postMessage('received!' , 'http://www.wrox.com');
}
}XDM 已经作为一个规范独立出来，现在的名字是 Web Message;
2、原生拖放
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
/*
通过设置 draggable=true, 说明此元素可以被拖动。
图片拖动时触发 ondragstart 方法
释放拖动的元素时，ondrop 方法
*/
</script>
</head>
<body>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="1.gif" draggable="true" οndragstart="drag(event)" id="drag1"/>
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
</body>
</html>
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
