`
shuai1234
  • 浏览: 971979 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

让网页框架自适应高度(根据内容自动适应)

阅读更多
 
正文:

通过以下的代码就可以轻松实现框架自适应高度。

 

以下是引用片段:
<script type="text/javascript">    
//** iframe自动适应页面 **//    
   
//输入你希望根据页面高度自动调整高度的iframe的名称的列表    
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。    
   
//定义iframe的ID    
var iframeids=["alixixi.com"]    
   
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏    
var iframehide="yes"   
   
function dyniframesize()     
{    
var dyniframe=new Array()    
for (i=0; i<iframeids.length; i++)    
{    
if (document.getElementById)    
{    
//自动调整iframe高度    
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);    
if (dyniframe[i] && !window.opera)    
{    
dyniframe[i].style.display="block"   
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape    
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;     
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE    
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;    
}    
}    
//根据设定的参数来处理不支持iframe的浏览器的显示问题    
if ((document.all || document.getElementById) && iframehide=="no")    
{    
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])    
tempobj.style.display="block"   
}    
}    
}    
   
if (window.addEventListener)    
window.addEventListener("load", dyniframesize, false)    
else if (window.attachEvent)    
window.attachEvent("onload", dyniframesize)    
else   
window.onload=dyniframesize    
</script>  

 

但在一次实际应用中,该代码写在了带有框架的页面上,页面加载时,框架是可以自动适应初始大小了。

但是如果改变框架里的内容后,框架还是不会自适应高度,那么,该如何解决这个问题呢。

在框架页面,比如:http://www.alixixi.com/down/index.html的最底部插入一行代码,就可以实现了,代码如下:

<script>parent.dyniframesize();</script>

意思就是在框架页重新加载时,就刷新运行一下父页的JS函数来调整框架高度,这样就可以实现自适应了

分享到:
评论

相关推荐

    框架自适应高度实例(动态调节框架高度)

    在网页设计和开发中,框架...总结,框架自适应高度实例的核心是利用JavaScript和CSS来创建一个能动态调整自身高度的布局,以适应内容的变化。通过理解和掌握这一技术,开发者可以创建更加灵活和用户友好的网页界面。

    网页内自适应高度框架JS

    网页内自适应高度框架JS是一种基于JavaScript实现的页面布局技术,它允许开发者创建灵活的页面结构,自动调整元素的高度以适应不同的屏幕尺寸和浏览器窗口大小。这种技术在响应式网页设计中尤其重要,因为它能够确保...

    JAVASCRIPT让IFRAME框架的高度自适应

    通过使用JavaScript来让IFRAME框架的高度自适应,我们可以实现IFRAME框架的高度自动调整,以提高用户体验。同时,我们也可以使用这个方法来实现其他类型的高度自动调整,以满足不同的需求。 在实际应用中,我们可以...

    Vue下textarea文本框根据内容自适应改变高度

    在Vue.js框架中,开发网页应用时,我们经常会遇到需要创建一个可以自动调整高度的textarea元素,以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...

    textarea 输入框自适应高度

    然而,通过一些JavaScript库或自定义脚本,我们可以使textarea的高度动态适应内容的变化。这篇博客(链接:https://xiaojin21cen.iteye.com/blog/1560814)可能详细介绍了如何使用JavaScript来实现这一特性。 实现...

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

    然而,由于浏览器的差异性,iframe的高度自动适应并不总是那么简单,尤其是在内容动态加载或页面内容高度不固定的情况下。 jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件,当iframe内容加载...

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

    ios-自适应高度tableView表单.zip

    在iOS应用开发中,自适应高度的表格单元格(UITableViewCell)是关键,因为它们可以自动调整大小以适应其内容。这种功能在显示不同高度的数据项时非常必要,比如一段文字、图片或者多行文本输入等。表单通常包含了...

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    jquery对iframe自适应高度插件

    这样,`iframe`就能自动适应其内容的高度,提供更好的用户体验。 总之,“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具,它的易用性和效率使得它成为开发者处理`iframe`高度问题的...

    iframe自适应子页面内容高度

    然而,若希望`iframe`的高度自动适应子页面内容,我们需要进行一些额外的处理。 首先,由于同源策略的限制,只有当`iframe`加载的页面与包含它的页面在同一域名下时,我们才能通过JavaScript获取`iframe`的内容信息...

    ios-Label自适应高度或宽度.zip

    这个"ios-Label自适应高度或宽度.zip"文件提供的解决方案,就是帮助开发者动态计算UILabel根据文本内容(text)和字体(font)应具有的最佳高度或宽度。 首先,我们要理解UILabel的工作原理。默认情况下,UILabel会...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    html嵌入html,高度自适应,标签切换。

    标题"html嵌入html,高度自适应,标签切换"表明我们正在讨论一种技术,它涉及在HTML文档中嵌入iframe,并且这个iframe能够根据内容自动调整其高度,同时支持通过li标签进行页面切换。 首先,我们要理解什么是iframe...

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

    在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...

    解决Layui 表格自适应高度的问题

    在网页开发中,Layui 是一款非常流行的前端框架,它提供了丰富的组件,包括表格(Table)等。在创建响应式布局时,确保表格能够自适应屏幕大小和内容高度是至关重要的,因为这能提供良好的用户体验。然而,在实际...

    swift-一款AlertView提示框高度可根据内容自适应

    DiyAlertView的核心思想是利用Swift的强类型和面向对象特性,构建一个可以智能检测并适应内容大小的弹框类。这个类通常会包含以下关键组件和功能: 1. **自定义视图设计**:DiyAlertView的外观可以根据开发者的需求...

    高度自适应窗口

    高度自适应窗口的关键在于动态调整窗口大小,以便内容能够适应不同的显示条件。这涉及到布局管理、尺寸检测、媒体查询等一系列技术手段。 在源码层面,实现高度自适应窗口通常需要以下步骤: 1. **尺寸检测**:...

    内嵌框架自适应浏览器宽度.rp.zip

    这个“内嵌框架自适应浏览器宽度.rp.zip”文件很可能是关于如何使IFrame的内容根据浏览器窗口的宽度自动调整布局的教程或示例。 在网页设计中,确保元素自适应不同设备和屏幕尺寸的宽度至关重要,特别是对于IFrame...

    仿微信朋友圈 输入框支持自适应高度

    - 为了实现更复杂的功能,如自适应高度,可能需要自定义一个`ViewGroup`,在这个自定义的视图组中,重写`onMeasure()`方法,根据内部子视图(如`EditText`)的尺寸来计算自身高度。 6. **动画效果**: - 为了让...

Global site tag (gtag.js) - Google Analytics