最近频繁的做一些通过iframe在a页面嵌入b页面需求。总结下来,有以下问题需要解决

1.如何同步iframe与嵌入内容的高度

2.将b页面载入到a页面后,如何隐藏掉b页面上的元素,如左导航,顶部导航等等

 

-如何同步iframe与嵌入内容的高度

a)获取由iframe引入的页面高度

contentWindow返回的是嵌入到中页面的window对象。可以通过这个window对象获取到网页的高度。contentWindow支持所有主流浏览器。

contentDocument返回的是嵌入页面的document对象。

 

b)同步引入页面与iframe的高度

 将获取到的高度赋值给iframe

 demo

  <iframe src="http://jsbin.com/nobefis" ></iframe>
  
  <script>
      function resizeFrameHeight(currentFrame){
        if(currentFrame){
          var iframeObj = currentFrame.contentWindow;//获取iframe引入网页的window对象,进而通过window对象获取引入内容的document对象
      if(iframeObj.document.body){   currentFrame.height = iframeObj.document.body.scrollHeight; } } } window.onload = function () { resizeFrameHeight(document.getElementById("currentFrame")) } </script>

 

HTMLIFrameElement.contentWindow

window.frames

HTML IFrameElement

iframe

contentWindow for an iframe

js操作iframe里的dom

相关文章:

  • 2022-12-23
  • 2021-12-04
  • 2021-12-12
  • 2021-12-12
  • 2021-12-12
  • 2021-07-07
  • 2021-06-10
  • 2022-01-04
猜你喜欢
  • 2021-07-19
  • 2021-09-06
  • 2021-09-14
  • 2021-07-13
  • 2022-12-23
  • 2022-02-07
相关资源
相似解决方案