月度归档:2015年01月

HTML5跨文档消息传递

HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM)。 现在XDM已经作为一个规范独立了出来,名字为:Web Messaging   项目地址为:http://dev.w3.org/html5/postmsg/ XMD核心就是postMessage()方法,这个方法接受两个参数一个是需要传送的字符串,第二个是接收方的域的字符串。 第二个参数可以控制一定的安全性,如果把第二个参数设置为”*”,那么就是所有的域都可以接收此消息。 而相对于postMessage()方法的其他页面指的就是包含在当前页面中的元素或者是由当前窗口弹出的窗口。如下列中首先创建一个iframe内嵌框架,获取iframe元素window对象的引用(所有支持XDM的浏览器都支持iframe的contentWindow属性),然后进行消息传递。

 1 var newIframe = document.createElement("iframe");
 2 
 3 newIframe.src = "http://www.baidu.com/";
 4 
 5 newIframe.width = "500px";
 6 
 7 newIframe.height = "500px";
 8 
 9 document.body.appendChild(newIframe);
10 
11 var iframeWindow = newIframe.contentWindow;
12 
13 iframeWindow.postMessage("this is post mess", "http://www.baidu.com");     //传递信息成功

 

传递过后会触发接收方window对象的message事件,在message事件对象中包含三个息息相关重要的属性:

继续阅读

HTMLImageElement类型的简便利用

这个是我在复习书籍的时候看见的,当时一个同学想通过页面发送请求,但是数据量不是太大,所以用的get方式,但是页面用表单提交请求的话会让页面进行跳转,当时我在网上查了一点资料,发现基本上都是通过ajax请求,无奈现在还没有学习到ajax这一部分,于是翻书,正好看到这里了。所以后面的代码改了过后,一句话解决了问题。

1 var chunk = 数据; var url = "http://www.baidu.com"; document.createElement("img").src = url + "&" + chunk;

在Javascript中对于图片格式进行了实现类型为HTMLImageElement继承自HTMLElement,这个类型拥有img标签公有的特性名对应的属性,可以通过这些属性进行设置。 HTMLImageElement类型是一个动态的类型,也就是说不添加进DOM树中还是能够加载,这个过程我把它叫做”预加载”,如下:

1 var nimg = document.createElement("img"); nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif"; 
//当执行到这一条语句的时候,此时它就会预加载,即使你没有添加进DOM树中,没有添加进DOM树只是你看不见。

 

如何来验证这个问题?我通过添加load事件来监听是否加载完成,如果加载完成则弹窗,这里我把顺序分成在监听前设置src属性,和监听后设置src属性。 第一种方式:先设置src属性后监听

1 var nimg = document.createElement("img"); nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif"; 
2  //这里并没有弹窗 
3 
4 nimg.addEventListener("load",function(){alert(1)},false); document.body.appendChild(nimg); 
5  //即使我添加进DOM树还是没有弹窗

 

第二种方式:先监听后设置src属性

1 var nimg = document.createElement("img"); 
2 
3 nimg.addEventListener("load",function(){alert(1)},false);
4 
5 nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif";  
6 //执行到这里的时候会弹窗,说明监听到事件。

 

HTML表单脚本

在HTML中,表单由

标签构成。在javascript中,是由HTMLFormElement类型构成,这个类型继承自HTMLElement类型。

HTMLFormElement类型具有以下单独的属性和方法:

  • acceptCharset: 服务器能够处理的字符集(HTML中的accept-charset)
  • action:请求的URL地址(HTML中的action)
  • method:请求的http类型,是为POST还是为GET(HTML中的method)
  • elements:表单里的所有组件的集合,类型为HTMLCollection
  • length:表单里所有组件的数量
  • enctype:请求编码的类型(HTML中的enctype)
  • name:表单的名称(HTML中表单的name)
  • submit():用编程方式提交表单
  • reset():将表单里所有可填写的组件内容置空
  • target:用于发送请求和接收响应的窗口名字(HTML中的target)

document.form属性

可以通过document.form来获取整个页面的form表单,返回一个集合,可以通过数值的索引活着name值来查找特定的表单:

var oneform = document.form[0];

var twoform = document.form[twoform];

elements属性

每个表单都会有一个elements属性,里面包含了表单内所有组件的集合,它是一个有序的列表,里面包含了按顺序的组件索引,可以通过数值索引和name值来访问里面的组件。

var oneform = document.form[0];

var oneinput = oneform.elements[0];

submit()、reset()

可以通过编程方式提交表单,在表单的引用上调用submit()方法可以提交表单,但是不触发submit事件。相对于reset()方法,可以通过调用执行置空,但是它会触发reset事件。 继续阅读

JavascriptDOM事件

Javascript与html之间的交互是通过事件进行交互。事件是通过侦听器(交互处理程序)来预定执行的。 页面中哪部分会拥有某个特点的事件?当你点击页面中的任何一个元素,其实就是点击了整个页面,用书上的例子来说: 当你画一个同心圆的时候,把手指放在圆心,你手指指向的不单单是一个圆,而是全部的圆。

事件流

事件流指的是页面中接收事件的顺序,DOM2级事件规定事件流包括三个步骤,分别为:

1.捕获阶段 捕获阶段是为了截获事件提供机会
2.处于目标阶段 这个阶段表示目标接收到事件
3.冒泡阶段 这个阶段可以对事件做出响应

事件处理程序

继续阅读

Javascript访问css样式信息

DOM2级样式为style对象定义了一些属性和方法,可以通过这些方法属性来访问或者修改元素的样式信息:

1、cssText:可读写,在读的情况下以字符串形式返回元素的css代码,在写的情况下以字符串形式重写整个元素的css代码
2、length:返回当前元素应用的css属性数量。
3、parentRule:返回表示css信息的CSSRule对象
4、getPropertyCSSValue(propertyName):返回给定样式属性的CSSValue类型值
5、getPropertyPriority(propertyName):如果当前给定的样式属性使用了!important,则返回”important”,反之返回空字符串
6、getPropertyValue(propertyNamee):以字符串形式返回给定属性的值 item(index):返回给定位置的CSS属性的名称
7、removeProperty(propertyName):删除给定属性
8、setProperty(propertyName, value,priority):将给定的属性设置相应的值,如果需要表示优先,那么在priority位置添加important字符串

在DOM2级中为style对象定义的方法和属性是无法获取到从其他样式叠层应用的样式信息,DOM2级样式增强 document.defaultView,提供了getComputedStyle计算方法。这个方法接受两个参数,要计算的元素和一个伪元素字符串(如:”:after”)。这个方法可以获取任何通过叠层应用来的样式信息。但是返回的任何结果只能读不能写,因为这些信息是已经计算的结果。 IE不支持getComputedStyle()方法,但是IE有一个类似的方法实现的,这个方法定义在IE浏览器style对象里面的currentStyle属性。这个属性放回一个包含当前元素全部计算过后的样式信息。