注意:这两种方式不支持跨域使用

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跨页面设置高度的更多相关文章

  1. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  2. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  3. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

  4. IFrame跨域访问&&IFrame跨域访问自定义高度

    1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...

  5. Iframe跨域JavaScript自动适应高度

    重点分析: 主域名页面:页面A,页面C 其它域名页面:页面B 步骤: 1.页面A(主域名)通过Iframe(id="iframeB")嵌套页面B(其它域名) 2.页面B(其它域名) ...

  6. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  7. 【HTML】iframe跨域访问问题

    概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...

  8. js iframe跨域访问

    1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

  9. javascript跨域、iframe跨域访问

    1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...

随机推荐

  1. xml与json互转

    依赖包: <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib< ...

  2. 二叉树的下一个结点(剑指offer_8)

    题目描述 给定一个二叉树和其中一个结点,请找出中序遍历顺序的下一个结点并返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. public class TreeLinkNode { i ...

  3. 如何安装 mcrypt

    #cd libmcrypt-2.5.8 #./configure #make #make install 说明:libmcript默认安装在/usr/local3.安装mhash #tar -zxvf ...

  4. 做网站用php还是python

    单纯说做网站,显然是php更适合,php是专为web而生,而Python只是可以做web.php也比python更简单,更容易学,对于新手更友好. 从权威技术网站w3techs.com2017年7月2 ...

  5. CF1037H Security 后缀自动机 + right集合线段树合并 + 贪心

    题目描述: 给定一个字符串 $S$ 给出 $Q$ 个操作,给出 $L,R,T$,求出字典序最小的 $S_{1}$ 为 $S[L...R]$的子串,且 $S_{1}$ 的字典序严格大于 $T$. 输出这 ...

  6. 配置自己的CocoaPods库

    序 默认安装的cocoapods确实很好用,可是毕竟自己会写一些库和修改一些第三方库来用.所幸cocoapods确实是一个神器.他可以定义自己的库来用. 如何安装Cocoapods,请参考这篇 从头来 ...

  7. Spring JDBCTemplate 简单使用

    Spring JDBCTemplate applicationContext.xml配置 <?xml version="1.0" encoding="UTF-8&q ...

  8. windown 使用python 自动切换网络

    由于工作环境的特殊性,有时需要切换到内网工作,有时需要通过手机连接外网,想自动运行一个脚本就做完这事 首先在PC机上安装一个无线网卡,例如360wifi就可以. 除了python,还用到了DOS命令, ...

  9. scrapy--meta参数传递问题

    scrapy使用大坑---meta参数传递出现之重复问题 问题描述: 爬虫目标: 实现哔哩哔哩网站的视频信息爬取,只要的信息结构爬去顺序为**关键词的搜索结果,拿到第一页上某个视频的标题,url,和时 ...

  10. 用 Flask 来写个轻博客 (37) — 在 Github 上为第一阶段的版本打 Tag

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 第一阶段结语 打 Tag 前文列表 用 Flask 来写个轻博客 (1 ...