<!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 实现判断 主机是否能 ping 通

    Java 实现判断 主机是否能 ping 通 代码实现如下: import java.io.IOException; import java.net.InetAddress; import java. ...

  2. Java数组(3)：创建测试数据

    有时我们需要使用数组批量创建测试数据,接下来通过以下4点来举例. (1) 使用Arrays.fill()填充数据 (2) 使用Random类中JDK1.8提供的新方法用来生成随机数 (3) 一个随机数 ...

  3. Data Exfiltration with DNS in MSSQL SQLi attacks

    DNS解析过程 DNS解析过程 DNS 查询的过程如下图1所示. 图1 文字举例说明: 假定浏览器想知道域名xprp8i.dnslog.cn的IP地址. 1.浏览器先向本地DNS服务器进行递归查询. ...

  4. 深入理解C语言-深入理解内存四区

    数组与指针 当数组做函数参数的时候,会退化为一个指针 此时在函数内是得不到数组大小的 因此,数组做函数参数的时候需要传递数组大小,也就是多传递一个参数 void func(int arr[], int ...

  5. alertmanager + federate - Prometheus outside k8s cluster + 总体架构图 对接企业微信告警 + curl alertmanager to send alert

    1.实验的架构 2.k8s 集群外的Prometheus的配置文件 [root@do1cloud03 prometheus]# cat prometheus.yml |egrep -v '#' glo ...

  6. 通过js判断整型，浮点型，布尔型，字符串型

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

  7. [转帖]nginx 80端口重定向 转发到443端口

    nginx 80端口重定向到443端口 2017年05月16日 13:53:58 幸福丶如此 阅读数 33387   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文 ...

  8. *【Python】【demo实验27】【练习实例】【定义递归函数】

    原题: 原题解答: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- # 利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出 ...

  9. sqlyog注释的快捷键-先收藏

    在学习使用sqlyog的时候,想要多行注释SQL语句,就去网上找了相关的快捷键,与大家分享,网上有很多! Ctrl+M 创建一个新的连接Ctrl+N 使用当前设置新建连接Ctrl+F4 断开当前连接 ...

  10. ES简介及特点

    1.ES是什么? ES是一个高度可伸缩的开源的全文检索和分析引擎,它允许你以近实时的方式快速存储.搜索.分析大量数据,ES是基于Lucence开发,隐藏其复杂性,提供了简单易用的restful api ...