前日对iframe的几种文档对象获取方式做了测试,发现一些有趣现象,与大家分享!
假设在页面嵌入如下iframe:
<iframe id="testFrame" name="testFrame" src="#" frameborder="0" border="0" scrolling="no" style="display:none"></iframe>
众所周知,iframe是内嵌窗口,我们可以通过多种方式获取iframe对象及其window\document对象(同域前提),不过哪些是哪些有时会搞不清,测试目的也是为了加深记忆。
比较常见的方法有以下几种,分别测试:
- A:document.getElementById(‘testFrame’)
- B:window.frames['testFrame'];
- C:document.getElementById(‘testFrame’).contentWindow
测试结果(非IE浏览器及IE8)

从测试结果及其比对结果可以看出,A得到的是iframe这个html标签对象,B和C得到的是iframe浏览器对象(window),有意思的是IE7及以下版本浏览器认为这两者是不恒等的
…
document, dom, iframe, window, 兼容
Javascript开发中,需要与0,undefined,null,false进行等同比较时,我们知道,用’===’(恒等)比较靠谱,我是在第一次使用jslint时知道这点的,例如在Jslint中验证
var test = '';
alert(test==0);
会得到提示:
Use '===' to compare with '0'
看看ECMA规范中是如何对==和===操作符进行定义的,了解其深层的规则以及jslint提示的缘由
首先介绍==
11.9.1 等同运算符( == )
运算符规则如下所示:
1. 计算运算符左侧表达式;
2. 对第1步的结果调用GetValue;
3. 计算运算符右侧表达式;
4. 对第1步的结果调用GetValue;
5. 对第4步的结果与第2步结果执行比对(参考 11.9.3);
6. 返回第5步结果;
再来详细了解比对过程(11.9.3)
11.9.3 抽象的等同比对算法…
ECMA, equals, identical, javascirpt, strict, 恒等, 操作符, 等同, 规范
dean.edwards在被问及“不写代码的时候都在干些什么?”时非常囧地答道:“在测试和修bug(testing&debugging)”,这便是开发工程师共同的命运=.=! 我们整天都在编码、测试、Debug,忙的不亦乐乎。不过还好,有很多现成工具可以帮助我们更容易更快速地定位页面内的脚本问题,抽空还能偷个懒,简单搞个例子,看看它们是如何帮助我们的…
fiddler, firebug, javascript, location
通常我们用 js 脚本创建 iframe 时,会这样写:
var iframe = document.createElement('iframe');
之后我们可能会定义 id、name、border 等属性,这些看似简单,其实 IE 与非 IE 浏览器之间、IE 和 IE 高版本之间的迥异,使得 iframe 的相关兼容性操作非常地有文章…
frameborder, iframe, name, onload, target
全中国都是墙,偶懒的翻,因此经常看老外 Twitter 发的短地址就比较杯具,于是用longurlplease提供的 API 做的短地址还原小应用,主要是自己用着好用,支持批量还原,当然今后还可以做成浏览器插件。话说 longurlplease 提供的 API 还真的很全面,一定要顶个,还有 Flash Air ,有空再整。
呃,很简单的东西就不多讲了,直接狂点此链接试用。
OK,继续加班 =.=!
呃,再加个图,增加些点击欲望……


longurlplease, real url, short url, 短地址
题目不知道如何去归纳了,总之本文的重点在后面,this关键字在函数调用模式时为何会绑定到全局变量,答案真的在后面^_^
apply, call, function, javascript, this
一、函数表达式与函数声明
/*函数表达式*/
var test = function(){
console.debug('hello world');
}
/*函数声明*/
function test(){
console.debug('hello world');
}
两种方式并不是一致的,看下面的比较代码
test();//不会被执行,因为虽然test已经声明是一个变量,但还未被赋予任何类型的值
var test = function(){
do something
}
constructor, function, javascript, object
这是我的亲身经历……
大家都知道写Form表单时需要给各个域加上name属性,以便提交相应数据。如果我们设置域的name值和form元素的属性值相同,这时候再用脚本去取form元素的属性(经常需要这么干,比如更改action和method属性)时,实际取得的会是同样name的表单域对象,举个例子:
<form name="demoForm" id="demoForm" action="http://www.silentash.com" method="get">
<input name="method" value = "hello world" />
</form>
<script>
alert(document.getElementById('demoForm').method);//返回的是input对象
alert(document.getElementById('demoForm').getAttribute('method'));//IE返回的还是input对象
</script>
action, from, trap
项目中用到的一个模态对话框效果,样式可以通过独立的 CSS 控制,可以在不同浏览器下统一表现,这种弹窗效果应该是非常常见的,技术上也没什么难度,我就是又把 YUI 的方法用原生方法重写了一遍,算是一个独立版本吧,在这里做个记录,分享下,以后可以在其他场合用到。
实例:Javascript 模态对话框
javascript, 模态, 窗口