【网页设计】框架的高度随框架里面的内容的多少而改变——转
iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数:
程序代码
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
程序代码
<iframe width="778" align="center" height="200" id="win" name="win" οnlοad="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>
另一种情况的iframe解决方案(超简单)
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下
1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)
parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;
这里的 框架ID名 就是Iframe的ID,比如:
<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>
2、给你网站里所有的被包含文件里面每个都加入
<script language = "JavaScript" src = "bottom.js"/></script>
3、OK,收工!
在WINXP、IE6下面测试通过。很简单吧!
实现 iframe 的自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
程序代码
<script type="text/javascript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//如果用户的浏览器不支持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);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.οnlοad=dyniframesize
</script>
【网页设计】框架的高度随框架里面的内容的多少而改变——转相关推荐
- html网页设计作品初级,《HTML网页设计技术》教案.doc
<HTML网页设计技术> 教案首页 本次课标题:说课 授课日期 第6周 周1 授课班级 课 时 1 上课地点 教 学 目 标 能力目标 知识目标 1. 本课程的任务.性质.目的 2. 本课 ...
- 2019年网页设计趋势前瞻,先睹为快!
追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一.快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响. 回顾2018年的网页设计趋势,不难看出许多设计趋势 ...
- 2019年网页设计趋势前瞻,先睹为快
追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一.快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响. 回顾2018年的网页设计趋势,不难看出许多设计趋势 ...
- 网络推广外包之前企业网站如何看待当下网页设计趋势?
随着互联网技术应用在网络推广外包中不断精进,网页设计也在更新迭代,尤其是当下网站目标用户需求每天都在变化,网页设计必然要考虑到这些因素督促网络推广外包能力的提升,那么对于站长来说应该怎样看到近些年来网 ...
- html5+css3网页设计与网站布局从新手到高手,HTML5+CSS3网页设计与网站布局从新手到高手...
HTML5+CSS3网页设计与网站布局从新手到高手 语音 编辑 锁定 讨论 上传视频 <从新手到高手:HTML 5+CSS 3网页设计与网站布局从新手到高手>是2013年1月清华大学出版社 ...
- javascript网页设计期末作业 购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业 购物网站 如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业 购物网站 网页实 ...
- 商品审核网页界面_网页设计与制作竞赛通知
广东水利电力职业技术学院 网页设计与制作竞赛通知 一.竞赛目的 网页设计与制作赛项旨在通过学院技能大赛提升我校学生网页制作的基本能力与创新能力,增强学生对主流制作工具的应用能力,提高网页设计相应岗位职 ...
- 如何做好手机端网页设计
你有没有想过? 移动端页面总是做不好,是设计水平不够还是方法出了问题? 在日常生活中,大部分人对于手机的使用度远超过电脑,随着5G时代的到来,对于手机的依赖程度仍呈现上升的趋势,而早在几年前,PC端流 ...
- 《网页设计与欣赏》大学选修课论文
大学里最后一门公选课,我选择了<网页设计与欣赏>这门课程,出于对网页设计的强烈的兴趣,抱着强大的求知欲,终于,我进入这门课程的学习.虽然这门课程的总学时比较短,但是经过老师的认真授课以及 ...
最新文章
- php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
- 一个ABAP调试器里查看类的静态属性的小技巧
- o_rdonly_O_RDWR, O_CREAT等open函数标志位在哪里定义? | 学步园
- java 获取插入数据的自增长id
- Kubernetes 和 Docker,到底什么关系?
- dfs序 + RMQ = LCA
- atitit 技术选型之道. attilax著 艾龙著 1. 标准	2 1.1. 符合趋势度	2 1.2. 简单易用	2 1.3. 文档丰富度	2 1.4. 下载便利性	2 1.5. 性能	2 1.
- N1盒子刷入codesys当PLC使用
- 黑刀 php,黑刀Dezender (PHP解密)
- m 文件 dll matlab 中调用_《淫巧系列二》MATLAB中直接调用Python
- 2021年Flash被禁用后继续使用的方法
- 如何将带网口打印机进行局域网共享打印
- uniapp + HbuliderX更新日志
- (十一)jmeter接口自动化难点系列---设置响应超时时间
- php字符串去空格函数,php去掉字符串中的空格
- Java工程师面试题,最全的java手机游戏免费下载基地
- 【汇编语言】16位汇编总结
- mysql5.7应该导什么包_微信表情包制作amp;上线全过程(详细血泪史)
- 命运2服务器维护2021,命运2 2021年3月17日更新内容详解 冰影系列削弱一览[多图]...
- 服务器导出表为dmp文件,Oracle导入导出dmp表
热门文章
- 2840页的计算机毕业论文,德州奥斯汀华人博士究竟写了啥
- 为了孩子上名校,他们发论文给子女署名,Nature发文报道韩国学术不当行为
- DeepMind助力Waymo!提升自动驾驶AI准确率,还能加快模型训练
- 关于在Windows Mobile下今日插件使用WTL的问题
- kernel笔记——内核编译与进程管理
- MySQL · 捉虫动态 · show binary logs 灵异事件
- CISCO ACL的匹配数问题
- 字符串(一):char 数组
- Android网络之数据解析----SAX方式解析XML数据
- perl 取出目录中的所有文件并存入文件中