`
pcajax
  • 浏览: 2162681 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

iframe框架页面实现自适应高度解决方案

框架JavaScriptXHTMLHTMLJ# 
阅读更多

经常会有父页面需要通过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跨域嵌套自适应高度

    本文将详细介绍如何实现`iframe`跨域嵌套下的自适应高度调整，并讨论如何解决因跨域嵌套而可能引起的`session`丢失问题。 #### 一、`iframe`自适应高度原理与实现 1. **基本概念**： - **`iframe`**：`iframe`即...

    iframe自适应高度（兼容目前所有主浏览器)

    iFrame 自适应高度是前端开发中常见的问题，很多开发者在搜索引擎中搜索相关解决方案，但大多数文章只能解决静态高度的问题，而忽视了 JS 操作 DOM 之后的动态同步问题。同时，在浏览器兼容性方面也存在一定的漏洞。...

    JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）

    jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件，当iframe内容加载完成后，获取其实际内容高度并设置为iframe的height属性。这种方法可以确保iframe始终能完全显示其内部内容，避免滚动条的...

    iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）

    "iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）"这个标题所指向的，就是一种跨浏览器的策略，确保iFrame内容无论何时更新，都能自动调整其高度，从而避免滚动条的出现和内容溢出。...

    再谈iframe自适应高度

    - 默认情况下，iframe的高度需要手动设定，但不同内容的页面高度各不相同，如果设定不当，可能会导致内容溢出或显示不全。 - 另一个问题是跨域问题，由于同源策略的限制，浏览器不允许JavaScript在不同的源之间...

    iframe跨域常用问题和iframe页面自适应

    在网页开发中，`iframe`...总结，理解和掌握`iframe`的跨域解决方案以及自适应策略，对于开发高效且用户体验良好的Web应用至关重要。在实际应用中，还需要注意安全性、性能优化等问题，以提供更优质的网页服务。

    jquery对iframe自适应高度插件

    总之，“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具，它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件，可以避免手动计算和调整`iframe`...

    网页内自适应高度框架JS

    总结来说，"网页内自适应高度框架JS"是一种利用JavaScript实现的网页布局解决方案，它使得网页元素能够自动调整高度以适应不同的显示环境。通过引入`left.js`脚本和设置`cols`属性，开发者可以轻松创建自适应高度的...

    iframe 自适应高度

    通过上述方法，我们可以轻松实现`iframe`自适应高度的功能，使得页面布局更加合理美观。同时，在实践中还需要注意各种特殊情况的处理，以确保用户体验不受影响。希望本文能帮助开发者更好地应对实际项目中的挑战。

    iframe自适应高度js demo

    在网页开发中，`iframe`（Inline Frame）是一种嵌入式框架元素，它允许我们在一个HTML文档中嵌入另一个HTML文档。...通过查看并运行这些文件，你可以更好地理解并实践`iframe`自适应高度的JavaScript解决方案。

    网页制作中Iframe自适应高度的解决办法

    在网页制作过程中，Iframe（内联框架）是一种常见的元素，用于在页面中嵌入其他网页或者内容。然而，Iframe的高度自适应往往是一个棘手的问题，因为如果内容动态加载或者不同长度，Iframe默认的高度可能无法适配，...

    Iframe实现跨浏览器自适应高度解决方法

    在网页开发中，Iframe（内联框架）是一种常见的元素，用于在单个HTML文档中嵌入另一个HTML文档。然而，当涉及到跨浏览器兼容性和页面自适应性时...希望这个解决方案能对你在jQuery编程中处理Iframe高度问题时提供帮助。

    嵌入到HTML的iframe自动适应大小

    本文将深入解析这一技术的实现原理、代码示例以及可能遇到的问题和解决方案。 ### 重要概念：iframe与自动适应 #### iframe概述 iframe（Inline Frame）是HTML文档中的一个嵌入式框架，允许在一个网页中嵌入另一个...

    iframe自适应高度

    通过上述分析可以看出，实现`iframe`自适应高度不仅能够提升用户体验，还能增强页面的整体布局效果。开发者可以根据实际需求选择合适的方法来实现这一功能，并在实施过程中注意兼容性和安全性等问题。

    iframe高度自适应

    在`iframe`高度自适应的解决方案中，主要有两种常见的方法： 1. **JavaScript/jQuery动态调整高度** 这种方法通过运行JavaScript或jQuery脚本来检测`iframe`的内容高度，并将其设置为`iframe`的`height`属性。首先...

    iframe 多层嵌套 无限嵌套 高度自适应的解决方案

    在网页开发中，有时我们需要使用`iframe`（内联框架）来嵌套不同的页面，以实现内容的分隔和组织。然而，当`iframe`进行多层嵌套时，特别是无限嵌套，如何保证每个`iframe`的高度都能自适应其内容，避免滚动条的出现...

    iframe窗口高度自适应的又一个巧妙实现思路

    在网页开发中，有时我们需要使用`iframe`框架来嵌入其他网页内容，特别是在处理跨域问题时。然而，当`iframe`内的页面内容发生变化时...对于需要处理跨域`iframe`高度问题的开发者，这是一个值得参考和实践的解决方案。

Magicbox
Global site tag (gtag.js) - Google Analytics