<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>客户详情</title>
<script src="js/jquery-1.12.4.min.js"></script>
<style>
body{margin: 0;padding: 0;}
.index{width: 100%;position: fixed;max-width: 640px;}
.index ul{width: 100%;overflow: hidden;margin: 0;padding: 0;height: 45px;background: #FFFFFF;}
.index ul li{width: 33.333%;float: left;list-style-type: none;text-align: center;font-family: "黑体";font-size: 1.05rem;line-height: 43px;letter-spacing: 1px;color: #999999;}
.index_ul_div{width: 100%;position: absolute;z-index: 1;margin-top: 43px;overflow: hidden;}
.index_ul_div span{width: 21%;height: 2px;background: #BD2032;float: left;margin-left: 6.2%;position: relative;}
.content{width: 100%;padding-top: 46px;}
.content span{width: 100%;height: 100%;}
.activity{color: #BD2032 !important;}
</style>
</head>
<body style="padding: 0;margin: 0;max-width: 640px;margin: 0 auto;">
<div class="index">
<ul id="click">
<li id="clickone" class="activity">客户详情</li>
<li id="clicktwo">收款记录</li>
<li id="clickthree">跟进记录</li>
<div class="index_ul_div">
<span id="span_line">123</span>
</div>
</ul>
</div>
<div class="content">
<span id="details"><iframe src="details.html" id="iframeId" height="auto" width="100%" frameborder="0" scrolling="auto" onload="iFrameHeight()"></iframe></span>
<span id="collect"><iframe src="collect.html" id="iframeIdtwo" height="auto" width="100%" frameborder="0" scrolling="auto"></iframe></span>
<span id="record"><iframe src="record.html" id="iframeIdthree" height="auto" width="100%" frameborder="0" scrolling="auto"></iframe></span>
</div>

<script>
//获取iframe子页面内容高度给iframe动态设置高度
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';
}
};
function iFrameHeighttwo() {
var ifm= document.getElementById("iframeIdtwo");
var subWeb = document.frames ? document.frames["iframeIdtwo"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.style.height = 'auto';
ifm.style.height = subWeb.body.scrollHeight+'px';
}
};
function iFrameHeightthree() {
var ifm= document.getElementById("iframeIdthree");
var subWeb = document.frames ? document.frames["iframeIdthree"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.style.height = 'auto';
ifm.style.height = subWeb.body.scrollHeight+'px';
}
};
$(document).ready(function(){
$('#click li').click(function(){
$(this).addClass('activity').siblings().removeClass('activity')
})
$('#clickone').click(function(){
$('#span_line').animate({
marginLeft: '6.2%',
})
$('#details').css('display','block')
$('#collect').css('display','none')
$('#record').css('display','none')
})
$('#clicktwo').click(function(){
$('#span_line').animate({
marginLeft: '39.5%',
})
$('#details').css('display','none')
$('#collect').css('display','block')
$('#record').css('display','none')
iFrameHeighttwo()
})
$('#clickthree').click(function(){
$('#span_line').animate({
marginLeft: '73%',
})
$('#details').css('display','none')
$('#collect').css('display','none')
$('#record').css('display','block')
iFrameHeightthree()
})
})
</script>
</body>
</html>

获取iframe子页面内容高度给iframe动态设置高度的更多相关文章

  1. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  2. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  3. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  4. 如何实现跨域获取iframe子页面动态的url

    有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可 ...

  5. Js获取iframe子页面全局变量

    项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...

  6. iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...

  7. 获取iframe子页面节点，响应浏览器宽高

    获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...

  8. iframe子页面position的fixed

    前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面 ...

  9. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

随机推荐

  1. java web 能够实现整个文件夹的上传下载吗？

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  2. linux 中的命令是什么?执行命令的几种方式？如何自己创建命令？

    linux 中的命令是什么? 命令是可执行的二进制程序 执行命令的几种方式? ./test.sh                     #相对路径执行 /data/test.sh           ...

  3. Python学习笔记——递归函数

    1.设置递归层数 #设置recursion函数的层数,默认是100层 import sys sys.setrecursionlimit(10000) 2. 阶乘 #定义一个阶乘函数 def facto ...

  4. 请求头出现Provisional headers are shown

    provisional headers are shown 知多少:https://juejin.im/post/5c00980751882518805add83 请求头出现Provisional h ...

  5. c++文件指针读写图片文件

    #include "stdafx.h"#include <string>using namespace std;int _tmain(int argc, _TCHAR* ...

  6. 【Python】【demo实验9】【练习实例】【三数排序】

    原题: 输入三个整数x,y,z,请把这三个数由小到大输出. 我的解法: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- # 输入三 ...

  7. 【转】nosql的分类

    1 键值数据库 相关产品:Redis.Riak.SimpleDB.Chordless.Scalaris.Memcached 形式:Key 指向 Value 的键值对,通常用hash table来实现 ...

  8. python列表一

    1.列表数据类型 列表是一个值,它包含多个值构成,也可包含其他列表,其内的表项用逗号分隔 列表值:作为一个值可以保存在变量中,或传递给函数,像所有其他值一样.  #不是指括号内的值 表项:列表中的值, ...

  9. 解决Python查询Mysql中文乱码问题

    前段时间,自己瞎动手用Django写了一个更新zip包和sql到远程服务器的工具.但Python从Mysql中读取出来的中文字符会乱码,如下图: 解决办法:Python连接Mysql时指定charse ...

  10. windows server 2008 R2 Enterprise 防火墙开启允许远程桌面登录

    解决方法: 开始------ > 运行 ----- > gpedit.msc 打开“本地组策略编辑器”,按如下设置:计算机配置----->管理模板----->网络-----&g ...