iframe整理学习笔记

朋友问了一个比较怪的问题,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

原文地址:https://www.cnblogs.com/w3cjiangtao/p/3295666.html