关于iframe跨页面设置高度
注意:这两种方式不支持跨域使用
1.jQuery简单实现iframe的高度根据页面内容自适应的方法(加载后展示使用)
方式1:
//注意:下面的代码是放在和iframe同一个页面中调用
$("#iframeId").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
$(this).height(mainheight);
});
方法2:
//注意:下面的代码是放在iframe引用的子页面中调用
$(window.parent.document).find("#iframeId").load(function () {
var main = $(window.parent.document).find("#iframeId");
var thisheight = $(document).height() + 30;
main.height(thisheight);
});
2.原生自适应方式
<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>
<script type="text/JavaScript"> startInit('mainFrame', 560);</script>
js
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = false, isFireFox = false, isChrome = false, isSafari = false, isIE = false;
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false)
bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
else if (isIE == false && isOpera == false)
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
else if (isIE == true && ! -[1, ] == false) { } //ie9+
else
bHeight += 3; var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
iframe.style.height = height + "px";
} catch (ex) { }
}
function startInit(iframeId, minHeight) {
isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
if (!!window.ActiveXObject || "ActiveXObject" in window)
isIE = true;
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}
关于iframe跨页面设置高度的更多相关文章
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- Iframe跨域JavaScript自动适应高度
重点分析: 主域名页面:页面A,页面C 其它域名页面:页面B 步骤: 1.页面A(主域名)通过Iframe(id="iframeB")嵌套页面B(其它域名) 2.页面B(其它域名) ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【HTML】iframe跨域访问问题
概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...
- js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
- javascript跨域、iframe跨域访问
1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...
随机推荐
- 网络安全专家教你设置史上最安全的WiFi密码
通过设置强密码可以防止WiFi被蹭网现象的发生,保证WiFi网络安全.那么我们的WiFi密码怎么设置才最安全呢? 提供以下设置建议: 1.WiFi密码设置尽量使用字母.数字和字符组成的密码.这种密码强 ...
- redis专题
1.Linux安装redis 2.redis持久化 3.redis配置 4.SpringBoot整合Redis发布订阅 5.redis事务 5.1.redis事务介绍 5.2. redisTempla ...
- JIRA之两大统计图讲解
一.创建与解决的问题-状态统计图 配置方式 理解该统计图 横坐标 x:时间 纵坐标 y:issue数量 统计图示解读: A.随着时间的推移,创建的问题数(红线)减少,修复问题数(绿线)增加,标志着版本 ...
- 对Promise的研究3
Promise.race() Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.race([p1, p2, p ...
- laravel后台账户登录验证(5.5.48版本)
首先我是菜鸟,对laravel框架也不是很熟悉,突然有一天心血来潮就想研究一下laravel的后台登录用户登录的流程, 虽然公司项目中有这样的一套流程,也看了好几遍,越看越简单,越看我就越会了,当自己 ...
- 【CF1257E】The Contest【线段树】
题意:给定三个序列abc,问最少操作几次使得满足a<b<c 题解:将三个序列合并起来,设cnt[i][1/2/3]表示前i个数有几个是来自序列1/2/3的. 枚举第一个序列要到i,此时对于 ...
- Jenkins 节点配置中没有Launch agent via Java Web Start 选项
Jenkins节点配置的启动方式中没有Launch agent via Java Web Start,如下图 怎样能设置出来呢? 1:打开"系统管理"——"Configu ...
- xpath定位不到原因浅析
在爬虫中,我们经常使用xpath来对元素进行定位,xpath定位分为两种,一种是绝对定位,/html/body/div[2]/div[1]/div/div[3]/a[7],另外一种是相对定位,比如r' ...
- Label设置行间距
内容摘要 UILabel显示多行文本 UILabel设置行间距 解决单行文本 & 多行文本显示的问题 场景描述 众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行 ...
- 当主机ip变了修改gitlab的ip地址
gitlab服务器IP地址更换后需要修改以下两个配置中的IP地址: /var/opt/gitlab/gitlab-rails/etc/gitlab.yml /etc/gitlab/gitlab.rb ...