经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求 页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。

对于同父级域名下的自适应高度：www.chinaz.com/index.html 页面中嵌入www.chinaz.com/xxx.html页面

1.0   http://jipiao.taobao.com/index.htm中关键代码

<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.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://www.chinaz.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>

不同父级页面，例如www.chinaz.com, book.chinaz.com域名完全不一样，解决办法是使用一个代理页面www.chinaz.com/proxy.htm www.chinaz.com/index.htm页面嵌入 book.chinaz.com/xxxx.htm，而xxx.htm需要隐藏嵌入www.chinaz.com/proxy.htm做为代理，可以将高度写在后面www.chinaz.com/proxy.htm#500，表示500px高度。

1.www.chinaz.com/index.htm页面中关键代码：


<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxxx.htm" mce_src="http://www.chinaz.com/xxxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>

增加如下JS:

  1. <mce:script type="text/javascript"><!--
  2. (function(){
  3. /**
  4. *  获取当前域
  5. **/
  6. function _getDomain(){
  7. var _hostname = window.location.hostname.toString();
  8. var _hosts = _hostname.split(".");
  9. var _len = _hosts.length;
  10. if(_len>2){
  11. return _hosts[_len-2]+"."+_hosts[_len-1];
  12. }
  13. return _hostname;
  14. }
  15. document.domain = _getDomain();
  16. })();
  17. // --></mce:script>

2. www.chinaz.com/xxxx.htm 中关键代码：


<iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" src="http://www.chinaz.com/proxy.htm#597" mce_src="http://www.chinaz.com/proxy.htm#597" id="taobaoIframe">
</iframe>

<mce:script type="text/javascript"><!--
(function(){
var pageHeight = document.body.scrollHeight;
document.getElementById('taobaoIframe').src = 'http://www.chinaz.com/proxy.htm#' + pageHeight;
})();
// --></mce:script>

3.在代理页面book.chinaz.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框架页面实现自适应高度解决方案相关推荐

  1. alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案

    一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...

  2. iframe自适应高度解决方案

    经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度,这就要求 页面必须具有自适应功能.自适应思想比较简单:就是父页面中iframe高度必须要适时 ...

  3. 如何实现iframe(嵌入式帧)的自适应高度

    好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄 ...

  4. iframe框根据内容自适应高度

    1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2width=100% hei ...

  5. iframe 去除边框和自适应高度

    因为做项目经常要用到页面镶嵌,每次都忘记一些细节问题,特地写下来以便查阅,很久以前是网上搜到一些前辈的,但是时间太久忘记是哪位了,没办法给具体链接. 以下是js代码: <script type= ...

  6. html div 嵌套 iframe,iframe嵌套页面自适应

    iframe内嵌怎么自适应 怎么让iframe自适应浏览器的高度和宽度 在文件夹里创建两个html文件,一个"index"一个"iframe". 在index中 ...

  7. 调用二级页面的html代码,从一级页面直接调用二级页面中的iframe框架

    上次写了篇调用iframe框架页面的文章,今天继续说一下怎么从一级页面跳转到指定的二级页面中的iframe框架的问题.( 太绕口了) 继续以我做的网站为例子,演示地址是http://www.super ...

  8. 3.1HTML网页之iframe框架

    3.1HTML网页之iframe框架 描述:iframe框架 需求:在一个HTML网页中,编写若干个超链接,在点击超链接时,打开的方式: 在本网页的局部打开,而不是在新的网页中打开! QQ邮箱案例 技 ...

  9. iframe内嵌框架自适应高度

    添加js代码: /iframe内嵌框架自适应高度/ function iFrameHeight() { var ifm= document.getElementById("iframepag ...

最新文章

  1. 【OpenCV 4开发详解】分割图像——Mean-Shift分割算法
  2. java中outer的使用
  3. k8s与CICD--将drone部署到kubernetes中，实现agent动态收缩
  4. [FxCop.设计规则]13. 定义自定义属性参数的访问属性
  5. 多线程编程(9) - 认识等待函数 WaitForSingleObject
  6. 计算机应用人机对话,什么是“人机对话”
  7. TensorFlow tf.expand_dims
  8. Android 基础-2.0 拔打电话号码
  9. .NET Core 2.1 Preview 2带来网络方面的改进
  10. VOIP Codec 三剑客之 ISAC/ILBC -- ISAC (1) 介绍
  11. 怎样将优酷视频编码KUX转MP4视频格式
  12. inputbox使用
  13. 阿里云打造离线下载服务器
  14. miui7 android系统版本,miui7系统
  15. 变量foo 和 bar的由来
  16. Advanced COM Interop
  17. matplotlib显示伪彩色图像及色度条
  18. JS实现下载txt文件
  19. 实力非凡 国内主流开源建站系统推荐
  20. 一个比较vista的vista主题for rf5.0fb(转)

热门文章

  1. 信息学奥赛一本通（1102：与指定数字相同的数的个数）
  2. C++语言基础 —— 控制结构
  3. 训练日志 2018.10.7
  4. 计算线段长度（信息学奥赛一本通-T1033）
  5. Python 和 R 数据分析/挖掘工具互查
  6. springboot整合rpc远程调用_SpringCloud—RPC远程调用
  7. CondenseNet总结
  8. 机器学习--逻辑斯谛回归（Logistic Regression）
  9. super和this关键字详解
  10. markdown居中文本 - 代码篇