html脚本编程,HTML5 脚本编程

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、原生拖放

#div1, #div2 {

float: left;

width: 100px;

height: 35px;

margin: 10px;

padding: 10px;

border: 1px solid #aaaaaa;

}

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 方法

*/