ContextMenu API
经测试chrome28不管用。。
新的API,ContextMenu 是极好的接口: 此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单),而不是去覆盖浏览器的默认右键菜单。
需要注意的是,你最好采用js脚本来动态的创建菜单contextmenu,这样可以避免页面禁用JS脚本的情况 下出现多余的HTML代码。
代码如下:
代码如下:
点击此区域查看菜单
为了代码结构的清晰,把menu元素放到了要使用的元素内部,其实你也可以放到外部的任何地方:
-->
Element.dataset
数据集(dataset) API 允许开发者对DOM元素设置(set)和获取(get) 以 data- 前缀开头的属性值。
代码如下:
代码如下:
代码如下:
function testDataset(){
//
var intro = document.getElementById("intro");
// 注意这个不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:"+id
+",website:"+website
+",blogUrl:"+blogUrl
+",myName:"+myName
;
//
warn(msg);
};
没有什么好说的,和classList一样,简单却实用。(想一想,是否改变了后台和前台JS的某些交互以及解耦?)
window.postMessage API
IE8 已经支持 postMessage API 好几年了,此API允许window 和iframe 元素之间互相传递消息。
跨域支持哦。 代码如下:
代码如下:
// From window or frame on domain 1, send a message to the iframe which hosts another domain
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");
// From inside the iframe on different host, receive message
window.addEventListener("message", function(event) {
// Make sure we trust the sending domain
if(event.origin == "http://davidwalsh.name") {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage("Hello back!");
}
]);
// message 只允许string 类型的数据,然而您可以使用 JSON.stringify 以及 JSON.parse 传递更多有意义的消息。
autofocus Attribute
autofocus 属性确保当页面加载后,给定的 BUTTON,INPUT或者 TEXTAREA 元素能够自动获得焦点。
代码如下:
autofocus 属性主要用在简单的输入页面,详情请参考:autofocus 属性
各浏览器厂商对这些API的支持度各不相同,所以在使用之前最好检测一下兼容性,花一些时间来阅读上面所列出的API,您将会对他们了解和掌握更多。
部分的测试代码如下:
代码如下:
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com