获取iframe子页面内容高度给iframe动态设置高度
<!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动态设置高度的更多相关文章
- iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- 如何实现跨域获取iframe子页面动态的url
有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可 ...
- Js获取iframe子页面全局变量
项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...
- iframe子页面获取父页面元素的方法
在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...
- 获取iframe子页面节点,响应浏览器宽高
获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...
- iframe子页面position的fixed
前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面 ...
- iframe子页面与父页面元素的访问以及js变量的访问
1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getEle ...
随机推荐
- rsync重启的shell脚本
https://zhidao.baidu.com/question/2078634436717887028.html
- java 增强for循环对于空集和null的判断
List<String> list = null; for (String str : list) {//会报空指针异常 System.out.println(str); } List&l ...
- springboot-helloworld-eclipse
1.eclipse安装springboot插件 2.new->Spring Start ->group:组名称:artifact:组件名称:->选中web->finish 3. ...
- Leetcode之动态规划(DP)专题-122. 买卖股票的最佳时机 II(Best Time to Buy and Sell Stock II)
Leetcode之动态规划(DP)专题-122. 买卖股票的最佳时机 II(Best Time to Buy and Sell Stock II) 股票问题: 121. 买卖股票的最佳时机 122. ...
- 50道Kafka面试题和解析(转载)
转载:https://zhuanlan.zhihu.com/p/78912551 前言 Apache Kafka的受欢迎程度很高,Kafka拥有充足的就业机会和职业前景.此外,在这个时代拥有kafka ...
- 【FFMPEG】使用ffmpeg类库打开流媒体
版权声明:本文为博主原创文章,未经博主允许不得转载. 使用ffmpeg类库进行开发的时候,打开流媒体(或本地文件)的函数是avformat_open_input(). 其中打开网络流的话,前面要加上函 ...
- 用maven建立一个工程
建立java工程 mvn archetype:generate -DgroupId=cn.maxhou.demo -DartifactId=myapp -DarchetypeArtifactId=ma ...
- Nginx配置缓存服务器
Nginx为静态资源配置缓存服务器对网站性能提供很可观. 1.配置 接下来我看如何配置: 我的环境是在同一台机器上配置了一个用openresty搭建的反向代理,上游服务器(后端服务器)是本机的ngin ...
- centos7 的system
1.vim /etc/systemd/system/alertmanager.service [Unit] Description=Alertmanager After=network-online. ...
- phpstorm设置的快捷键突然失效了,提示: IdeaVim ...
下班后,打开PHPstorm,突然感觉不对,经常用的快捷键突然用不了. 例如按了 Ctrl+F 快捷键后,提示: IdeaVim! Using the Ctrl+F shortcut for Vim ...