最近接手了别人的项目,别人用到了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. Exp4恶意代码分析 20164312 马孝涛

    1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行.  1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sy ...

  2. 第5章 简单的C程序设计——循环结构程序设计

    5.1 为什么需要循环控制 前面介绍了程序中常用到的顺序结构和选择结构,但是只有这两种结构是不够的,还需要用到循环结构(或称重复结构).因为在程序所处理的问题中常常遇到需要重复处理的问题. 循环结构和 ...

  3. Linux 进程终止后自动重启

    /opt/a.sh #! /bin/bash ps -ef | grep python3 a.py | grep -v grep | grep python3 if [ $? -ne 0 ] then ...

  4. 网络协议 20 - RPC 协议(上)- 基于XML的SOAP协议

    [前五篇]系列文章传送门: 网络协议 15 - P2P 协议:小种子大学问 网络协议 16 - DNS 协议:网络世界的地址簿 网络协议 17 - HTTPDNS:私人定制的 DNS 服务 网络协议 ...

  5. Spring Cloud实战的代码和视频位置

    大家好,本博文的连接里包含了Spring Cloud实战的代码和视频位置. 代码下载连接: 视频下载连接:

  6. Python中路径操作

    目录 1. os.path模块 2. pathlib模块 2.1 目录操作 2.2 文件操作 3. shutil模块 3.1 os模块 3.2 shutil模块 1. os.path模块 3.4版本之 ...

  7. Python+requests+unittest+excel实现接口自动化测试框架

    一.框架结构:  工程目录 二.Case文件设计 三.基础包 base 3.1 封装get/post请求(runmethon.py) import requests import json class ...

  8. Vue2.0源码阅读笔记(一):选项合并

      Vue本质是上来说是一个函数,在其通过new关键字构造调用时,会完成一系列初始化过程.通过Vue框架进行开发,基本上是通过向Vue函数中传入不同的参数选项来完成的.参数选项往往需要加以合并,主要有 ...

  9. vue里如何灵活的绑定class以及内联style

    在我们平常的前端开发中少不了对DOM的操作,以及样式的动态控制,那我们在使用vue的时候该如何灵活的绑定class呢 1.最简单一个class绑定 v-bind:class设置一个对象,可以动态地切换 ...

  10. vue的父子组件间的相互传参props及props数据的多种验证机制

    感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...