如何控制iframe高度

如何控制iframe高度,第1张

function iframeResizeHeight(frame_name,body_name,offset) {
parentdocumentgetElementById(frame_name)height=documentgetElementById(body_name)offsetHeight+offset;
}
function Resize(){
var frame_name="main_info";
var body_name="main";
if(parentdocumentgetElementById(frame_name)){
return iframeResizeHeight(frame_name,body_name,0);
}
}
frame_name是iframe的ID body_name是 iframe包容DIV的ID
楼上的 :
<iframe name="main_info" id="main_info" border=0 marginwidth=0 framespacing=0 marginheight=0 src="/testhtml" frameborder=0 noresize scrolling="no" width=778 height=0 vspale="0" ></iframe>
然后testhtml:
<html>
<head>
<script>
function iframeResizeHeight(frame_name,body_name,offset) {
parentdocumentgetElementById(frame_name)height=documentgetElementById(body_name)offsetHeight+offset;
}
function Resize(){
var frame_name="main_info";
var body_name="main";
if(parentdocumentgetElementById(frame_name)){
return iframeResizeHeight(frame_name,body_name,0);
}
}
</script>
</head>
<body onload="Resize();">
<div id="main">
这里是你的内容
</div>
</body>
</html>

实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 // iframe自动适应页面 // //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔 例如: ["myfram

什么是自适应高度吧。所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面

你想iframe自适应高度用height="90%" 这样的方式是不可以的。
iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数:
程序代码
function SetWinHeight(obj)
{
var win=obj;
if (documentgetElementById)
{
if (win && !windowopera)
{
if (wincontentDocument && wincontentDocumentbodyoffsetHeight)
winheight = wincontentDocumentbodyoffsetHeight;
else if(winDocument && winDocumentbodyscrollHeight)
winheight = winDocumentbodyscrollHeight;
}
}
}
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
程序代码
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12614058.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存