H5脚本编程系列

175 阅读3分钟

下载 (1).jpeg

跨文档消息传递

跨文档消息传递 --- XDM:即来自不同域的页面之间的消息传送

const iframe = document.getElementById('iframe').contentWindow;

iframe.postMessage('传送的消息', 'http://www.juejin.cn')

postMessage接收两个参数,一条消息和一个表示消息接收方来自哪个域的字符串 接收到XDM的消息后,会触发window的message事件

window.addeventlistener('message', function (e) => {
    e.data // postMessage第一个参数发出的消息
    e.origin // postMessage第一个参数,发送消息的文档所在域
    e.source  // 发送消息的文档的window对象的代理
})

小结

  1. postMessage 可以跨域传送消息
  2. 由message监测并接收消息
  3. postMessage第一个参数最早是设置为字符串形式,后改了参数的定义,但为了保险起见还是应传入字符串

原生拖放

拖放事件:

  1. dragstart: 按下鼠标并开始移动鼠标时
  2. drag: 触发dragstart事件后随即触发,并且在拖动期间一直触发
  3. dragend: 当拖动停止时
  4. dragenter: 元素被拖动到放置目标上时
  5. dragover: 元素在放置目标上移动时
  6. dragleave/drag: 元素被拖出放置目标后

只有拖放事件没有数据变化是没有什么用的,所以IE5引入了dataTransfer对象,他是事件对象的一个属性,用于从被推动元素向放置目标传递字符串格式的数据 dataTransfer有两个主要方法:getData()和setData()

// 设置和接受文本
event.dataTransfer.setData('text', 'someText')
const text = event.dataTransfer.getData('text')
// 设置和接收URL
event.dataTransfer.setData('URL', 'http://www.juejin.cn')
const URL = event.dataTransfer.getData('URL')

注:

  1. dataTransfer对象只能在drag事件中读取
  2. setData的参数支持MIME类型,‘text’和‘URL’会被映射为‘text/plain’和‘text/uri-list’

draggable

默认情况下,图像、链接和文本都是可以拖动的,为了使其他元素可拖动HTML5为所有元素规定了一个draggable属性。图像和链接默认 draggable=true,其他元素默认值为false

历史状态管理

历史状态管理是现代Web应用开发中的一个难点。在现代WEb应用中,用户的每次操作不一定会打开一个全新的页面, 因此“后退”和“前进”按钮也就失去了作用,导致用户很难在不同的状态间切换。要解决这个问题,首先使用haschange事件

通过hashchange事件,可以知道URL的参数什么时候发声了变化,即什么时候该有所反应。而通过状态管理API, 能够在不加载新页面的情况下改变浏览器的URL。为此,需要使用history.pushState()方法。 该方法可以接收三个参数:状态对象、新状态的标题和可选的相对URL。

执行pushState()方法后,新的状态信息就会被加入历史状态栈,而浏览器低地址栏也会变成新的相对URL。但是,浏览器并不会真的想服务器发送请求,及时状态改变之后查询lacation.href也会返回与地址栏中相同的地址。另外,第二个参数目前还没有浏览器实现,因此完全可以只传入一个空字符串。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为pushState()会创建新的历史状态,所以你会发现“后退”按钮也能使用了。按下“后退”按钮,会触发window对象的popstate事件。popstate事件的事件对象有一个state属性,这个属性就包含着当初以第一个参数传递给pushState()状态对象。

要更新当前状态,可以调用replaceState()。会重写当前状态。

小结

  1. 跨文档消息传递API能够让我们在不降低同源策略安全性的前提下,在来自不同域的文本间传递消息
  2. 原生拖放功能让我们可以方便的指定某个元素可拖动
  3. 历史状态管理让我们不比卸载当前页面即可修改浏览器的俩是状态栈