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

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

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

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

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

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

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

demo

  <iframe src="http://jsbin.com/nobefis" id="currentFrame" width="100%" scrolling="no" frameborder="no"></iframe>

  <script>
      function resizeFrameHeight(currentFrame){
        if(currentFrame){
          var iframeObj = currentFrame.contentWindowif(iframeObj.document.body){
            currentFrame.height = iframeObj.document.documentElement.scrollHeight || iframeObj.document.body.scrollHeight;
          }
        }
      }

      window.onload  = function () {
        resizeFrameHeight(document.getElementById("currentFrame"))
      }
  </script>
时间: 2024-10-25 19:37:46

如何同步iframe与嵌入内容的高度的相关文章

IFrame 根据嵌入页面自动调节大小

很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用IframeResizer脚本可以很好解决此问题,并且它是跨域名的,即使嵌入的是第三方页面,不需繁杂处理,几个步骤就可以使它自动调节宽度和高度. 1.首先下载iframe-resizer最新版本,现在是v2.5.2, 地址: https://github.com/davidjbradshaw/iframe-r

jquery iframe取得元素与自适应高度

总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在iframe子页面获取父页面元素 $('#objId', parent.document); 在iframe子页面获取父页面元素 代码如下:  代码如下 复制代码 $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页面的元素代码如下:  代码如

响应式的嵌入内容和图片

依据被嵌入内容的外部容器的宽度,自己主动创建一个固定的比例,从而让浏览器自己主动确定视频或 slideshow 的尺寸,可以在各种设备上缩放. 这些规则被直接应用在 iframe.embed 和 object 元素上.假设你希望让终于样式与其它属性相匹配,还能够明白地使用一个派生出来的 .embed-responsive-item 类. 超级提示: 不须要为 iframe 元素设置 frameborder="0" 属性,由于我们已经替你这样做了! 先看demo DEMO 等比缩放的属性

【Javascript 基础】嵌入另一张HTML文档、通过插件嵌入内容

1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="叶超Luka" /> <meta name=&quo

Bootstrap组件之具有响应式特性的嵌入内容

根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放.这些规则被直接应用在 <iframe>.<embed>.<video> 和 <object> 元素上. .embed-responsive--指定div为具有响应式特性的嵌入内容的组件: .embed-responsive-16by9..embed-responsive-4by3--指定组件内元素宽高比分别为16:9.4:3;

Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容

well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放. 这些规则被直接应用在 <iframe>.<embed>.<video> 和 <object> 元素上.如果你希望让最终样式与其他属性相匹配,还可以明确地使用一个派生出来的 .embed-responsive-item 类.常用的有16:9   4:3 1.

javscript 实现iframe加载内容页出现LOADING效果

<div id="load" align="center"> <img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" /> loading </div> <!-- 首先放一个div,用做loading效果 --> <iframe id="demo" src="http://www.**

设置DIV根据内容自动调整高度的三个方法

Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid="content"></div></div> 当Content内容很多时,即使main设置了高度100%或auto.在除IE外的其他浏览器中还是不能完好的自动伸展.也就是说,内容的高度容器main的高度还是没有自动撑开. 我们有三种方法可以解决这个问题. 一,增加一

父容器不根据内容自适应高度的解决方法

Div不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容器中有一个空格.