有不少wBox的用户反映iframe时候不可以自动撑开高度，今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码，感觉不错，转载来了。
var adjustIframe = function (id) {
var iframe = document.getElementById(id)
var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
var callback = function () {
var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
iframe.style.height = iheight + "px";
}
if (iframe.attachEvent) {
iframe.attachEvent("onload", callback);
} else {
iframe.onload = callback
}
} 继续阅读全文……
iframe是可以做的事情非常多，比如通过iframe实现跨域，使用iframe解决IE6下select遮挡不住的问题，通过iframe解决Ajax的前进后退问题，再比如通过iframe实现异步上传。在很早我就写过一篇文章说明了Iframe在IE、firefox下的一些DOM操作。今天结合最近项目中遇见的iframe问题，再来谈谈iframe的一些常见问题解决方案。
IE下iframe背景透明问题
在firefox下，iframe背景默认的是透明的，在IE下默认不是透明的，我们可以使用allowTransparency='true' 来设置IE下的iframe为透明，另外我们使用scrolling ='no' frameborder='0'分别来实现iframe页面没有滚动条，边框宽度。
IE6下iframe不显示的问题
不得不说IE6是个操蛋的浏览器，尤其是在中国！iframe有的时候在IE6中会出现不显示的问题，主要有以下几种原因，请一一排查：
- 可能你的iframe没有设置宽高，例如在table不居中，计算不出来td的高度，会导致这种问题
- 尝试使用下面的代码来重新载入IE6下的iframe页面：
setTimeout(function(){
document.frames['fuckIE6'].location.reload();
},0)
- 传闻iframe标签中不要把src紧跟在iframe之后，也就是
<iframe src='js8.in' name='fuckIE6'></iframe>是错误的，不过我没有碰见过类似的问题，为了保险起见，还是不要写成上面的样式为妙。
继续阅读全文……
昨天一个新来的同事关于iframe中进行DOM操作的问题，我说只要是不存在跨域的问题，是可以进行iframe 之间的DOM操作的。并且拿了以前写的两篇文章给新同事进行参考——《用document.domain+iframe实现Ajax跨子域》、《于Ajax在浏览器中产生前进后退的实现方法》。其中关于使用iframe进行跨域的demo，由于更换了新域名js8.in，导致了demo不能使用了，昨天紧急修改了一下，总算是可以使用啦~窃喜~
今天就写个完整的使用JavaScript进行iframe DOM操作的文章啦~跟大家讨论下IE和Firefox下iframe DOM操作的差异，然后写一个父窗口操作子窗口DOM，子窗口操作父窗口DOM，子窗口操作子窗口DOM的实例。经测试，断桥残雪写的iframe DOM操作实例，不仅仅只是在IE和Firefox下使用正常，而是可以兼容所有浏览器的。本文只是借IE和Firefox在iframe DOM操作的不同，进行分析说明JavaScript在DOM操作中两者的不同。
IE和Firefox对iframe document对象的差异性
在IE6、IE7中，我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象，可是这是不符合W3C标准的写法，也是IE下独有的方法，在Firefox下却不可以使用，Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法，今天我在写实例的时候，通过IE8进行测试，IE8也是使用的符合W3C标准的 document.getElementById(ID).contentDocument 方法。所以我们可以写一个在IE和Firefox下通用的获取iframe document对象的函数—getIFrameDOM：
function getIFrameDOM(id){
return document.getElementById(id).contentDocument || document.frames[id].document;
}
P.S.:如果我们要获取iframe的window对象，而不是document对象，可以使用document.getElementById(ID).contentWindow的方法。这样我们就可以使用子窗口中的window对象了，比如子窗口中的函数。
继续阅读全文……
Ajax跨域一直是个比较麻烦的问题，例如：断桥残雪在一个项目中使用了open打开一个跟父窗口不同域名的新页面，结果子窗口就不能传值给父窗口了；再如：我在www.2fool.cn下不可以获取love.2fool.cn域名下的页面内容。浏览器的跨域限制是为了安全，可是当我们想要在一个域名下请求另外一个域名的内容的时候就感觉不那么爽了。
我在WordPress天气插件、滔滔API接口处理上都使用了JSONP的方法来实现的跨域。而今天我要通过使用JS的document.domain和iframe来解决Ajax跨子域的问题。
原理
通过给主页面跟请求页面设置相同的document.domain来，欺骗浏览器，达到Ajax跨子域的效果，此方法在IE，chrome，Firefox，Safari，Opera下测试通过。
缺点：无法实现不同主域名之间的通讯。并且当在一个页面中还包含有其它的iframe时，会产生安全性异常，拒绝访问。
继续阅读全文……
关于Ajax在使用中要使浏览器产生前进后退的方法，网上比较多的方法有两种：一是采用hash值的方式，这是我们在地图preview版中使用的方法（采用jQuery的history插件）；二是使用iframe的方法，目前百度地图、Google地图采用。为使我们以后的mymap方便引用到博客等网页内容中去，并且给地图添加复制链接的方法，我们决定把地图中Ajax在浏览器产生前进后退的方法改变为iframe的方法。
实现的机制
主要使用的两个html：index.html，history.html（iframe src地址）。
主要代码参考index.html以及history.html的js部分:
现在说说实现的方式
Index.html中代码解释：
wHistory.init();
给body插入iframe跟一个表单（主要用于Safari浏览器、或者其他特殊使用，比如复制地址方面，直接取值input的value即可，不需要处理，而取iframe的src还要进行字符串的处理）
判断是否为Safari浏览器，如果是则特殊处理一下，根据不同的浏览器定义main函数
Callback函数处理返回的信息。
继续阅读全文……