iframe自适应高度解决方案
经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求 页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。
- 对于同父级域名下的自适应高度：jipiao.taobao.com/index.htm 页面中嵌入jiudian.taobao.com/xxx.htm页面
1.0 http://jipiao.taobao.com/index.htm中关键代码
<iframe id="J_selfAdapting" src="http://jiudian.taobao.com/xxx.htm" mce_src="http://jiudian.taobao.com/xxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>
页面增加如下JS:
<mce:script type="text/javascript"><!-- (function(){ /** * 获取当前域 **/ function _getDomain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } document.domain = _getDomain(); })(); // --></mce:script>
2.子页面http://jiudian.taobao.com/xxx.htm 中嵌入如下代码。即可。
<mce:script type="text/javascript"><!-- (function(){ /** * 获取当前域 **/ function _getDomain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } window.onload = function() { //设置子页面的域 document.domain=_getDomain(); function _setHeight() { if (window.parent != window) { try { //设置父级iframe的高度 parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px'; } catch(e) { } } //每隔2s设置一次，主要为了兼容子页面加载完毕之后高度再变化 setTimeout(_setHeight,2000); } //子页面加载完毕之后调用一次 _setHeight(); } })(); // --></mce:script>
- 不同父级页面，例如jipiao.taobao.com, www.koubei.com域名完全不一样，解决办法是使用一个代理页面jipiao.taobao.com/proxy.htm jipiao.taobao.com/index.htm页面嵌入 www.koubei.com/xxxx.htm，而xxx.htm需要隐藏嵌入jipiao.taobao.com/proxy.htm做为代理，可以将高度写在后面jipiao.taobao.com/proxy.htm#500，表示500px高度。
1.jipiao.taobao.com/index.htm页面中关键代码：
<iframe id="J_selfAdapting" src="http://www.koubei.com/xxxx.htm" mce_src="http://www.koubei.com/xxxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>
增加如下JS:
<mce:script type="text/javascript"><!-- (function(){ /** * 获取当前域 **/ function _getDomain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } document.domain = _getDomain(); })(); // --></mce:script>
2. www.koubei.com/xxxx.htm 中关键代码：
<iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" src="http://jipiao.taobao.com/proxy.htm#597" mce_src="http://jipiao.taobao.com/proxy.htm#597" id="taobaoIframe"> </iframe>
<mce:script type="text/javascript"><!-- (function(){ var pageHeight = document.body.scrollHeight; document.getElementById('taobaoIframe').src = 'http://jipiao.taobao.com/proxy.htm#' + pageHeight; })(); // --></mce:script>
3.在代理页面jipiao.taobao.com/proxy.htm中所有的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> </head> <body> <mce:script type="text/javascript"><!-- (function(){ /** * 获取当前域 **/ function _getDomain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } document.domain = _getDomain(); var height = window.location.hash.substring(1); try{ var el = window.top.document.getElementById('J_selfAdapting'); if(el) { el.style.height = height + 'px'; } } catch (e) {} })(); // --></mce:script> </body> </html>
iframe自适应高度解决方案相关推荐
- 【vue中实现iframe 自适应高度和去除滚动条】
项目场景: vue中实现iframe 自适应高度和去除滚动条 解决方案: html <iframe:src="tempSrc"width="100%":h ...
- Iframe自适应高度绝对好使的代码 兼容IE,遨游，火狐[转]
Iframe自适应高度绝对好使的代码,IE.遨游.火狐.Chrome都兼容,需要的朋友可以参考下. 这是我试了很多相关代码后发现的兼容性最好的Iframe自适应高度代码. <script typ ...
- alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
- [转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
- 【前端开发】前端引入公共部分footer header的几种方法，及iframe自适应高度js
一.引入页面几种方法 1.IFrame引入,看看下面的代码 <iframe frameborder=0 border=0 width=300 height=300 src= ...
- php iframe 自适应高度,两个iframe自适应高度的解决方法
很多小伙伴在做网站的时候对于解决 1.需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条. 2.方法一: 在iframe上面直接加onload的 ...
- 跨域下的iframe自适应高度
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- iframe 自适应高度的多种实现方式
iframe高度自适应内容 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. 设置iframe 自适应高度,使其等于内嵌网页的高度 ...
- php iframe 自适应高度,iframe自适应高度
很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1.需求分析: 使页面中的iframe可 ...
最新文章
- iOS-iOS9.Plist插入网络安全xml
- 嵌入式ARM Linux开发板自启动，跳过输入root用户名和密码
- 2013年2月28日星期四
- jspServlet(2)
- C++学习笔记30:模板与型式参数化
- IDEA中创建类时，自动在文件头中添加作者以及创建时间
- 作者：李文静，山东农业信息中心助理农经师。
- jmeter重写java请求_jmeter之编写java请求-扩展Java Sampler
- 诗与远方：无题（八十一）
- （专题四）01 二维曲线
- PAT乙级题解目录——更新ing
- 深入解析 ES6 系列（二）
- 筋膜枪方案-无刷马达方波运用1
- c语言动态开辟数组（一维与二维）
- echarts 使用 百度地图 加入自定义图标标记
- ROS可以不扫描地图，自己制作地图
- 下载了突袭：资源战争
- 20189220 余超《Linux内核原理与分析》第七周作业
- Kali无线渗透获取宿舍WiFi密码（WPA）
- jdk环境变量配置成功只需三步