<!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. idea忽略隐藏文件、文件夹的设置操作

    左上角setting 如果要忽略文件夹,则直接填写文件夹名字即可,例如:要忽略target文件夹[建议:尽量不要把target忽略,因为可能编译出问题排查,还需要查看target文件夹中的编译结果] ...

  2. keepalived+LVS-DR集群

    一.Keepalived介绍 keepalived 是一个类似于 layer3, 4 & 5 交换机制的软件,也就是我们平时说的第 3 层.第 4 层和第 5层交换. Keepalived 的 ...

  3. 归纳整理Python中的控制流语句的知识点

    归纳整理Python中的控制流语句的知识点 Python 解释器在其最简单的级别,以类似的方式操作,即从程序的顶端开始,然后一行一行地顺序执行程序语句.例如,清单 1 展示了几个简单的语句.当把它们键 ...

  4. php代码判断用户访问的当前协议是否为https

    public function isHttps() { if ( ! empty($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) ...

  5. reduce过滤数组

    原始数据 const data = [{ id: , spec: '规格1', rules: [{ rank: , breaks: }, { rank: , breaks: }, { rank: , ...

  6. Java虚拟机new对象

    类加载检查java虚拟机在遇到一条 new 指令时,首先会检查是否能在常量池中定位到这个类的符号引用,并且是否已被加载过.解析和初始化过.如果没有,那必须先执行类加载过程 类加载的相关知识可参考:JV ...

  7. 两表拼接 pd.concat

    a = pd.DataFrame([[1,2,3], [4,5,6], [7,8,9]],columns=['a','b','c']) b = pd.DataFrame([[11,23,45], [2 ...

  8. Leetcode之动态规划（DP）专题-123. 买卖股票的最佳时机 III（Best Time to Buy and Sell Stock III）

    Leetcode之动态规划(DP)专题-123. 买卖股票的最佳时机 III(Best Time to Buy and Sell Stock III) 股票问题: 121. 买卖股票的最佳时机 122 ...

  9. java8函数式接口(Functional Interface)

    介绍 函数式接口(Functional Interface)就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口. 函数式接口可以被隐式转换为 lambda 表达式(箭头函数). 函数式接口代 ...

  10. 前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输

    HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...