一:发送

window.postMessage("Hello, world", "http://127.0.0.1:8080");

注意,必须要加上http://,后面的端口如果是80的话,不必写,就算写了,监听的时候e.origin也不必把端口带上

二:绑定监听事件

window.addEventListener("message", messageHandler, true);

注意,绑定事件的类型是message,而不是load

三:监听

function messageHandler(e){

  switch(e.origin){

    case "http://127.0.0.1:8080":

HTML5 - HTML5 postMessage API 注意事项的更多相关文章

  1. 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

    在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...

  2. html5的postmessage实现js前端跨域訪问及调用解决方式

    关于跨域訪问.使用JSONP的方法.我前面已经demo过了.详细见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个很强大的A ...

  3. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

  4. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  5. HTML5: Screen Orientation API

    媒体的询问取决于智能手机和平板布局调整的方向一致网站.但有时候你被锁定在一个希腊网站特定方向.横向或纵向.此时,是本机格式可以指定保健应用. APP只显示在一个预设格式-独立于实际设备方向.通过使用H ...

  6. HTML5文件操作API

    HTML5文件操作API       一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...

  7. 锚接口(下)——html5的history api

    概述 虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法,但是很多老式的浏览器并不支持它,所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange ...

  8. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  9. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

随机推荐

  1. acdream 1210 Chinese Girls' Amusement (打表找规律)

    题意:有n个女孩围成一个圈从第1号女孩开始有一个球,可以往编号大的抛去(像传绣球一样绕着环来传),每次必须抛给左边第k个人,比如1号会抛给1+k号女孩.给出女孩的人数,如果他们都每个人都想要碰到球一次 ...

  2. Java [Leetcode 219]Contains Duplicate II

    题目描述: Given an array of integers and an integer k, find out whether there are two distinct indices i ...

  3. 【C#学习笔记】载入图片并居中

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. Python中文乱码的处理

    为什么Python使用过程中会出现各式各样的乱码问题,明明是中文字符却显示成“\xe4\xb8\xad\xe6\x96\x87”的形式? 为什么会报错“UnicodeEncodeError: 'asc ...

  5. linux笔试

    在对linux基本知识的归纳总结之后,这里是一份linux的测试题.希望能帮助大家复习和熟悉linux知识. 一.选择题 1.cron 后台常驻程序 (daemon) 用于:  A. 负责文件在网络中 ...

  6. WdatePicker的一些用法

    在选择日期之后,再执行自己的另一个函数   onpicked: function () { LoadData(); }  <input type="text" class=& ...

  7. webdriver(python)学习笔记五——层级定位

    层级定位 在实际的项目测试中,经常会有这样的需求:页面上有很多个属性基本相同的元素,现在需要具体定位到其中的一个.由于属性基本相当,所以在定位的时候会有些麻烦,这时候就需要用到层级定位.先定位父元素, ...

  8. Tableau学习笔记之二

    2张图片解析下Tableau 9.0界面的功能 1.数据加载界面: 2.数据分析界面:

  9. 告别where 1=1 最佳方案分享

    已经有2年没有用过where 1=1了,没想到换了家公司后,又让我看到了它.在网络上面搜索了一下,发现没有人提供一个比较好的方案来解决这一问题.很多人说可以让数据库的优化机制去处理,但是,我想对于大部 ...

  10. (一)使用Blender导出GameMaker支持的模型脚本

    源于YOYO论坛帖子:http://gmc.yoyogames.com/index.php?showtopic=603723 既然想做3D,那就先从模型的导入开始,具体的源文件,可以在“(二)使用等高 ...