window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https), 端口号(443为https的默认值),以及主机  (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信.window.postMessage()  方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全. otherWindow.postMessage(message, target

HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web Messaging   项目地址为:http://dev.w3.org/html5/postmsg/ XMD核心就是postMessage()方法,这个方法接受两个参数一个是需要传送的字符串,第二个是接收方的域的字符串. 第二个参数可以控制一定的安全性,如果把第二个参数设置为"*",那么就是

什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="https://www.openstreetmap.org/export/embed.htm

在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum域名中的页面通信.在XDM机制出现之前,要毫无压力地实现这种通信需要用很长时间.XDM把这种机制规范化,让咱们能够既稳妥又简单地实现跨文档通信. XDM的核心是postMessage()方法.对于XDM而言,”另一个地方”指的是包含在当前页面中的iframe标签,或者有当前页面弹出的窗口. post

有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有6个常用的浏览器窗体属性(由于offsetWidth/Height在不同浏览器下表现有出入,故不在本章讨论): document.documentElement.clientWidth document.documentElement.clientHeight document.documentEl

Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板. Zero Clipboard的安装方法首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中.然后把在你要使用复制功能的页面中引入Zero Cli

<video width="320" height="240" controls>   <source src="movie.mp4" type="video/mp4" poster="img/封面.jpg">   <source src="movie.ogg" type="video/ogg" poster="img/封面.j

什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element

在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作.DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口.它能够同时运行测试一组流行的浏览器(Chrome,IE,Firefox 和 WebKit). 您可能感兴趣的相关文章 UIkit – 轻量前端框架,帮助你快速构建 Web 界面 jQuery Wheel Menu:漂亮的 Path 风格旋转菜单 SlimerJS – Web开发人员可编写 JS 控制的浏览器 Chance

 Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多种平台,多种传输模式,还可以集合 Exppress 框架构建各种功能复杂的实时应用. 您可能感兴趣的相关文章 Chance – 功能强大的 JavaScript 随机数生成类库 Manifesto – HTML5 离线应用程序缓存校验工具 Codrops 教程:基于 CSS3 的全屏网页过渡特效 Zoom.js:一款效果非常独特的页面内容缩放插件 Popline:很特别

有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中.但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用).只有IE浏览器可以通过如下方式来进行复制. window.clipboardData.setData("Text", "这里是需要复制的文本内容") 想要实现跨浏览器的复制功能,我们就可以使用 ZeroClipboard. ZeroClipboard 及其原理介绍 ZeroClipboa

HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocumentMessage"> Cross Document Message , core---->postMessage()</div> <iframe id="frame_corssDM" src="http://localhost:63342

Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用 Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多种平台,多种传输模式,还可以集合 Exppress 框架构建各种功能复杂的实时应用. 您可能感兴趣的相关文章 Chance – 功能强大的 JavaScript 随机数生成类库 Manifesto – HTML5 离线应用程序缓存校验工具 Codrops 教程:基于 CSS3 的全屏网页过渡特效 Z

Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现   在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实现跨浏览器消息交互的可行性. 花了两个晚上简略的研究了下,LocalConnection的单向通信非常的简单,不过要实现多个终端交互,必须自己实现一套消息机制,见智见仁了. 为了简单演示,本例使用了基于广播的观察者模式:每个终端可以订阅自己感兴趣的主题,也可以向广播发送消息,通知其他感兴趣的终端.

前言 在web测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动化测试前,我们总是苦逼的在一台或多台机器上安装N种浏览器,然后手工在不同的浏览器上验证主业务流程和关键功能模块功能,以检测不同浏览器或不同版本浏览器上,我们的web应用是否可以正常工作. browser.png 下面我们看看怎么利用python selenium进行自动化的跨浏览器测试. 什么是跨浏览器测试 跨浏览器测试是功能测试的一个分支,用以验证web应用能在不同的浏览器上正常工作. 为什么需要跨浏览器测试 通常情况下,

转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提供对输入字段预期值的提示信息,input为空且未获得焦点时显示,获得焦点时消失,非常实用.目前,大部分现代浏览器都对placeholder属性提供了支持,IE10也是支持的.如果需要使IE6~IE9等浏览器支持placeholder,只有借助js了. 在这些不支持原生placeholder属性的浏览

<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // 添加事件句柄 addHandler: function(element, type, handler){ // DOM 2 级事件处理程序 if (element.addEventListener){ element.addEventListener(type, handler, false); } //

理解CSS盒子模型 如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器.CSS 盒子模型负责处理以下事情: ◆一个blcok(区块)级对象占据多大的空间 ◆该对象的边界,留白 ◆盒子的尺寸 ◆盒子与页面其它元素的相对位置 CSS 盒子模型有以下准则: ◆Block (区块)对象都是矩形 (事实上所有对象都如此) ◆其尺寸由 width, height, padding, b

JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要自己封装一个跨浏览器绑定(移除)事件的函数.跨浏览器添加(移除)DOM事件的一种非常经典的实现代码如下: //跨浏览器添加事件 function addHandler(target, eventType, handler) { if(target.addEventListener) { //DOM2

1. 事件流 事件:用户或浏览器自身执行的某种动作.如click(点击事件).mouse***(鼠标事件). 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. DOM事件流包括三个阶段: 事件捕获阶段 处于目标阶段 事件冒泡阶段 IE 采用事件冒泡的方式(div-->body-->html-->Document) NetScape 采用事件捕获的方式(Document-->html-->body-->div) DOM 采用先捕获后冒泡的方式 2. 事件处

前言 在web测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动化测试前,我们总是苦逼的在一台或多台机器上安装N种浏览器,然后手工在不同的浏览器上验证主业务流程和关键功能模块功能,以检测不同浏览器或不同版本浏览器上,我们的web应用是否可以正常工作. 下面我们看看怎么利用python selenium进行自动化的跨浏览器测试. 什么是跨浏览器测试 跨浏览器测试是功能测试的一个分支,用以验证web应用能在不同的浏览器上正常工作. 为什么需要跨浏览器测试 通常情况下,我们都期望web类应用能