最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题。

获取Iframe页面高度并赋值给Iframe

Html

<iframe name="container_ifranme" id="iframeId" scrolling="no" frameborder="no" border="0" src="home.html" onLoad="iFrameHeight()" ></iframe>

Js

function iFrameHeight() {

var ifm= document.getElementById("iframeId");

var subWeb = document.frames ? document.frames["iframeId"].document : ifm.contentDocument;

if(ifm != null && subWeb != null) {

ifm.style.height = 'auto';//关键这一句,先取消掉之前iframe设置的高度

ifm.style.height = subWeb.body.scrollHeight+'px';

}

};

获取iframe里的元素

1,contentWindow:是用来获取子窗口的window对象的,它兼容各大浏览器,用法如下

document.getElementById("iframeId").contentWindow

这样简单的一句就得到了iframe包含页面的window对象;

2,contentDocument:是用来获取子窗口的document对象的,主流浏览器都支持和ie8+支持,用法如下

document.getElementById("iframeId").contentDocument

这样简单的一句就得到了iframe包含页面的document对象;

以上两种方法是在父窗口中获取到子窗口,既然我们都能拿到子窗口window对象和document对象了,那么子窗口内其他的操作就easy了 !

如果要通过子窗口A访问到同级的子窗口B,那么我们可以在子窗口A中这么来做:

parent.getElementById("iframeId").contentWindow.document.getElmentById("frameId_B")

或者parent.getElementById("iframeId").contentDocument.getElmentById("frameId_B")就得到B窗口了。

获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素的更多相关文章

  1. html页面嵌套两个iframe页面导致第二个iframe页面高度失效的问题

    1:这是因为最里面嵌套的iframe页面html和body高度无法设置问题,我的解决办法是js去控制iframe高度 2:js获取最子页面(content内容区域)的高度 var ifremHeigh ...

  2. 在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值

    html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...

  3. iframe 自适应高度、父子页面传值、回调

    总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1.  ...

  4. iframe的高度自适应

    http://www.cnblogs.com/snandy/p/3902337.html http://www.cnblogs.com/snandy/p/3900016.html Snandy Sto ...

  5. 同域iframe的高度自适应

    引子 父页面里控制子页面 子页面里控制父页面 一.引子 我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 1.html <!DOCTYPE html ...

  6. JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...

  7. Asp.net MVC访问框架页中嵌套的iframe页面时,如果session或cookie过期,登录验证超时怎样自动跳转到登录页

    一般登录验证的过滤器中,使用验证过滤器的Redirect方法,将请求重定向到指定的URL.但是如果我们要访问的页面是一个嵌套在框架页中的iframe页面时,这种重定向只会对iframe页面凑效,也就是 ...

  8. iframe自适应高度(转)

    iframe自适应高度 (2013-04-23 17:29:49) 标签: iframe 高度 自适应 js 杂谈 分类: 网页制作 有时候我们的网站需要引入其他网站的东西,比如评论,这时候就需要使用 ...

  9. jquery获取高度错误(可以获取到宽度,但获取不到高度),及解决办法

    <div class="foo"> <div style="display: none;"> 3333333 </div> ...

随机推荐

  1. ES6 模块化笔记

    ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量. ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入. // ...

  2. 经典排序算法 — C#版本(中)

    归并排序比较适合大规模得数据排序,借鉴了分治思想. 归并排序原理 自古以来,分久必合合久必分. 我们可以这样理解归并排序,分-分到不能分为止,然后合并. 使用递归将问题一点一点分解,最后进行合并. 分 ...

  3. AI - TensorFlow - 张量(Tensor)

    张量(Tensor) 在Tensorflow中,变量统一称作张量(Tensor). 张量(Tensor)是任意维度的数组. 0阶张量:纯量或标量 (scalar), 也就是一个数值,例如,\'Howd ...

  4. .NET Core微服务之基于Jenkins+Docker实现持续部署(Part 1)

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.CI, CD 与Jenkins 互联网软件的开发和发布,已经形成了一套标准流程,最重要的组成部分就是持续集成(Continuous i ...

  5. Egg.js 中入参的校验

    日常作业中免不了频繁处理 GET/POST 的入参,你当然可以每个 action 中都重复地去做这些事情, 从 query 或 body 取出入参, 对可选的入参进行判空, 处理入参的类型转换, 对入 ...

  6. 将svg文件化成字体图标的步骤

     一 前提摘要     有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目,是很简单的,但当中遇到了一个小问题,就是tabs中图标选中和被选中的颜色问题,如果是新开发的,目前掌握的有两种办法 ...

  7. spring-security实现的token授权

    在我的用户密码授权文章里介绍了spring-security的工作过程,不了解的同学,可以先看看用户密码授权这篇文章,在 用户密码授权模式里,主要是通过一个登陆页进行授权,然后把授权对象写到sessi ...

  8. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  9. ubuntu16.04无法获取ip地址的解决方案

    当我们无法获取ip地址时可以使用dhcp来动态获取ip地址,安装dhcpcd5和dhcpcd-gtk sudo apt-get install dhcpcd5 sudo apt-get install ...

  10. XPath和CssSelector定位总结

    1. 介绍XPath和CssSelector 2. XPath有哪些方式 2.1 通过XPath语法 2.2 Contains关键字 2.3 Start-With 2.4 Or和And关键字 2.5 ...