<!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. maven循环引用的问题

    多模块的maven工程,有时候由于设计的不合理或者需求的变更.会导致模块之间产生循环依赖,编译的时候会报如下的错误: [INFO] Scanning for projects... [ERROR] T ...

  2. Go项目实战：打造高并发日志采集系统（三)

    前文中已经完成了文件的监控,kafka信息读写,今天主要完成配置文件的读写以及热更新.并且规划一下系统的整体结构,然后将之前的功能串起来形成一套完整的日志采集系统. 前情提要 上一节我们完成了如下目标 ...

  3. 使用kubeadm安装kubernetes1.12.2版本脚本【h】

    Master节点脚本: #!/bin/sh#使用系统的PATH环境export PATH=`echo $PATH` #停止firewall防火墙,并禁止开机自启动 systemctl stop fir ...

  4. bash-1 初始化CentOS系统的初始化脚本

    初始化CentOS系统的初始化脚本 #!/bin/bash # #******************************************************************* ...

  5. Java网络编程简明教程

    Java网络编程简明教程 网络编程  计算机网络相关概念 计算机网络是两台或更多的计算机组成的网络,同一网络内的任意两台计算机可以直接通信,所有计算机必须遵循同一种网络协议. 互联网 互联网是连接计算 ...

  6. Unity小白文——单例的定义

    当类继承与MonoBehaviour时 public class TestSingle : MonoBehaviour { public static TestSingle Instance; voi ...

  7. Sequelize+MySQL存储emoji表情

    一.原因 mysql的utf8编码的一个字符最多3个字节,但是一个emoji表情为4个字节,所以utf8不支持存储emoji表情.但是utf8的超集utf8mb4一个字符最多能有4字节,所以能支持em ...

  8. JS字符串格式化~欢迎来搂~~

    /* 函数:格式化字符串 参数:str:字符串模板: data:数据 调用方式:formatString("api/values/{id}/{name}",{id:101,name ...

  9. PowerShell .Net整套环境搭建及部署系列

    此系列包含一套完整的集群部署,全是个人原创(除第一个是摘抄的),转载请注明出处 其中DFS部分在国内资料极少,且全是重复的,还是外面好些,有问题可以给出解决方案 若内容有不详之处或你也同样被DFS所困 ...

  10. 小菜鸟之Phyhon

    # print("输入成绩",end="") # src=input() # print("成绩",end=src)#成绩 # print( ...