朋友问了一个比较怪的问题,iframe下自适应的问题,因为很少使用iframe的原因,怀着对iframe的疑惑采用了一点点实践;以下frame表示针对的iframe元素
解决的方法:对iframe进行操作,扑捉到iframe里的元素大小变化 然后对iframe设置,对iframe的父亲设置即可。。
demo地址:http://www.321xz.com/iframe/test/
1、关于iframe的操作
获取iframe页面的document
chrome:iframeElement.contentDocument
firefox:iframeElement.contentDocument
ie:element.contentWindow.document
备注:ie没有iframeElement.contentDocument属性。
存在跨域访问限制。
var getIframeDoc = function(frame){
return frame.contentDocument || frame.contentWindow.document;
}
获取iframe页面的window
var getIframeWin = function(frame){
return frame.contentWIndow;
}
获取iframe的html
frame.frameElement
获取所有的iframe的window
window.frames
iframe的元素获取到父亲的window对象
subele.contentWindow.parent
iframe元素获取到顶层页面的window对象
subele.contentWindow.top
QA:如果使用ajax请求的话 虽然能取到xhr对象变化,但是页面dom发生改变的时候无法得到,重新加载后的dom结构,或元素的实际宽高??
参考资料:http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html