操作iframe

获取子级iframe

contentWindow 所有浏览器都支持的

contentDocument ie 6 7 不支持

 

document.getElementById('iframe_id').contentWindow.document.getElementById('子页面元素节点');

 

window.parent  子frame操作父级页面

window.parent.document.getElementById('父页面元素节点').style.cssText=..

window.top 获取最顶层一级页面

window.top.document.getElementById('最顶层页面元素节点').style.cssText=..

 

 

防止被嵌套:

 

if(window!=window.top){

window.top.location.href=window.location.href

}

------------------------------------------------------------------------------------------------------------------

iframe下的锚点无法点击和元素固定位置失效 iframe页面的无法触发scroll事件:

chrome下,iframe的锚点无法点击问题:

解决方法:http://www.cnblogs.com/zhanghairong/archive/2012/07/10/2585240.html

在iframe里面设置元素的scrollTop+父页面里iframe距离顶部的距离 直接滚动到相应的位置

 

 

iframe里面设置fixed失效, iframe页面的无法触发scroll事件问题:

 

可以在父页面里获取iframe里的元素,当父页面scroll事件触发时设置该元素的top值为父页面的scrollTop值+该元素的top值

var oiframe = document.getElementById('iframe');

var top= '该元素的top值';

$(window).scroll(function() {

var obj = $(oiframe.contentWindow.document.getElementById('iframe里需要固定的元素'))

var scrollTop = $(window).scrollTop();

obj.stop(true,true).animate({

'top' :top+scrollTop + 'px'

});

});

 

------------------------------------------------------------------------------------------------------------------

frameset中各页面之间的传值方式:

参考资料:

http://www.zhangxinxu.com/wordpress/2010/12/%E5%B0%8Ftip%EF%BC%9Aiframe%E9%AB%98%E5%BA%A6%E5%8A%A8%E6%80%81%E8%87%AA%E9%80%82%E5%BA%94/#1954626-hi-1-25435-44b884a44e641374e37f732d829cd701

方法一:

比如一个子页面的值传送到另一个子页面

一个子页面上可以在url上传送 self.parent.frames["xxx"].location.href="urlsite?" +data

另一个子页面调用self.parent.frames["xxx"].location.search.substr(1) 获取问号后面传送的数值

 

方法二:

可以在父级页面即不变的那个页面 放置隐藏域  通过隐藏域传值

 

方法三:

通过cookie传递值

 

------------------------------------------------------------------------------------------------------------------

iframe自适应高度和宽度:

function IFrameReSize(iframename) {

  var pTar = document.getElementById(iframename);

  if (pTar) {  //ff

  if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {

  pTar.height = pTar.contentDocument.body.offsetHeight;

  } //ie

  else if (pTar.Document && pTar.Document.body.scrollHeight) {

  pTar.height = pTar.Document.body.scrollHeight;

  }

  }

  }

  //iframe宽度自适应

  function IFrameReSizeWidth(iframename) {

  var pTar = document.getElementById(iframename);

  if (pTar) {  //ff

  if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {

  pTar.width = pTar.contentDocument.body.offsetWidth;

  }  //ie

  else if (pTar.Document && pTar.Document.body.scrollWidth) {

  pTar.width = pTar.Document.body.scrollWidth;

  }

  }

  }

  使用方法如下:

  <iframe src="Main.aspx" scrolling="no" frameborder="0" height="100%" id="mainFrame" width="100%" onload='IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");'></iframe>

 

-----------------------------------------------------------------------------------------------------------

各浏览器Iframe对contentWindow、contentDocument、document及frames属性测试:

你可能感兴趣的:(iframe)