最近频繁的做一些通过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" id="currentFrame" width="100%" scrolling="no" frameborder="no"></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

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

  1. iframe框根据内容自适应高度

    1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...

  2. iframe 随内容自适应高度

    兼容性好的 html代码: <iframe src="enterprise/enter_edit.aspx" id="mainframe" framebo ...

  3. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  4. iframe内容自适应高度

    一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...

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

    很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用Ifram ...

  6. 【HTML5】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...

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

    Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容 well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例 ...

  8. 【HTML 元素】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...

  9. 使用Jquery向一个空白网页动态创建一个iframe,及嵌入页面,和向嵌入页面传参

    [csharp] view plaincopyprint?using Microsoft.VisualBasic; using System; using System.Collections; us ...

随机推荐

  1. UniDAC连接Embedded MySQL server

    Simple question about MySQL embedded application. Post a reply   7 posts • Page 1 of 1   Simple ques ...

  2. java连接Oracle案例

    首先来讲一下桥连接: 首先配置数据源:打开控制面板——管理工具——数据源(ODBC)——用户DSN——添加——找到Oracle驱动程序. //JDBC-ODBC桥连接public class Conn ...

  3. python-----查看显卡gpu信息

    需要安装pynvml库. 下载地址为:https://pypi.org/project/nvidia-ml-py/#history pip安装的命令为: pip install nvidia-ml-p ...

  4. request.getRemoteAddr()和request.getRemoteHost()

    转自:https://www.cnblogs.com/aizj/p/7593209.html request.getRemoteAddr()是获得客户端的ip地址.request.getRemoteH ...

  5. KVPhone,VOS官方的SIP软电话电脑客户端

    来自官方,品质纯正.但是可能因为JAVA环境等问题无法安装,可以试试! 下载地址: 解压密码:www.51voip.org

  6. 2-5 原生小程序 - 语法缺点.mp4

  7. PCB .NET Reactor 加密工具(NecroBit加密技术)

    在PCB行业中,我们使用的软件或脚本绝大多数都用非编译型语言写程序,而从一开始选择这种编程语言,就注定了程序的源码有被曝露风险.我们PCB工程系统用.NET语言编写,C#编译后会被转换为IL代码的中间 ...

  8. [App Store Connect帮助]六、测试 Beta 版本(3.2)管理测试员:邀请外部测试员

    在您上传至少一个构建版本之后,您可以邀请外部测试员(您组织之外的人员)使用“TestFlight Beta 版测试”来测试您的 App.为了使您的构建版本可用于外部测试,请创建一个群组.添加构建版本, ...

  9. 学生党的Surface Pro 5乞丐版使用体验

    因为已经装了台式机,大一开学时买的厚重且续航差的华硕游戏本(i5+GTX950M+8G)对我这个考研党已经显得不合适了.恰巧有一同学笔记本坏了,我便将游戏本低价出了,然后用两三倍的价格,入手了surf ...

  10. JavaScript相关技术学习

    百度前端技术学院 http://ife.baidu.com/task/all 框架 JQuery 简单Web论坛  https://github.com/huanshen/web-bbs http:/ ...