让iframe根据内容自动调整高度~~~

最新推荐文章于 2022-12-25 16:13:48 发布
最新推荐文章于 2022-12-25 16:13:48 发布
阅读量1.6k 收藏
点赞数
分类专栏： html 文章标签： iframe internet html 框架 table border
iframe在网页中经常用到，尤其是不想用框架却想具有框架一样的导航与显示效果的时候。不用框架的原因，有时是受布局图片的限制，不太好划分矩形区域，比较适合用表格背景图片自动伸缩的形式，我最近就碰到一例。
   网上很容易搜到在嵌入的页面的onload事件中调用如下代码的方法：
   parent.document.all(self.name).height=document.body.scrollHeight;
   就是这个方法不假，但还有一点是不可不加的，那就是expires，如果不禁止网页缓存，恐怕你是别想得偿所愿的。方法也很简单，在主页及嵌入页中加入如下内容：
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
   如此定当包你满意，简单示例如下。

    主页面内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>ifame自动高度</title>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" >

<table id="tab1" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td><iframe name="ifm" src="embed.htm" width="100%" frameborder="0" marginheight="0"

marginwidth="0" hspace="0" vspace="0"></iframe></td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>
</table>

</body>
</html>

    嵌入页面embed.htm内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0014)about:internet -->
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Expires content=0>
<META http-equiv=Cache-Control content=no-cache>
<META http-equiv=Pragma content=no-cache>
<script language="javascript">
function setparentheight(){
   parent.document.all(self.name).height=document.body.scrollHeight;
}
</script>
</HEAD>
<BODY οnlοad="setparentheight();">
<TABLE name="tab1" class=center cellSpacing=0 cellPadding=0 width="100%">
   <tr><td>　</td><td>1</td><td>　</td></tr>
   <tr><td>　</td><td>2</td><td>　</td></tr>
   <tr><td>　</td><td>3</td><td>　</td></tr>
   <tr><td>　</td><td>4</td><td>　</td></tr>
   <tr><td>　</td><td>5</td><td>　</td></tr>
   <tr><td>　</td><td>6</td><td>　</td></tr>
   <tr><td>　</td><td>7</td><td>　</td></tr>
   <tr><td>　</td><td>8</td><td>　</td></tr>
   <tr><td>　</td><td>9</td><td>　</td></tr>
</TABLE>
</BODY>
</HTML>
  
   你可以增加embed.htm中表格的行试试，iframe不会有滚动条，只有主页面的一条滚动条。其实技术很简单，特此铭记，以备日后再用。


原文链接http://hi.baidu.com/doufulo/blog/item/2976c3a9b71279f61e17a217.html

jungle依然
关注
专栏目录
iframe根据页面内容自适应高度和宽度
09-03
为了解决这个问题，我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先，我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下： ...
网站嵌入YouTube视频
狂奔的蜗牛
12-09 2108
嵌入的方式有两种 方式一：JS的方法控制播放 方法二：iframe <iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/_NxrnmLoiWY?autoplay=1" frameborder="0" allowfullscreen> 把视频ID换成自己的，就可以了 Api文档：https://developers.google.com/yo
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 6089
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
Iframe页面根据内容改变页面高度
weixin_39608271的博客
06-24 1589
Iframe页面根据内容改变页面高度问题描述实现方法 问题描述 jsp父级页面中有一个iframe，需要根据父级页面弹出框选中值改变iframe中的值，此时需要同步设置iframe的高度，防止iframe中出现滚动条。 实现方法 初始化时后设置iframe高度； <iframe src="" id="styleBomformKfover" height="0"></iframe> $("#styleBomformKfover").attr("src","url"); styleB
Iframe高度随内容自动调节
shaily读书学习
09-02 2204
以下两种方法会让网页中的iframe高度自动适应嵌入页的内容高度。方式一：在被嵌入页里写入代码假设main.htm文件内容：    则在iframe.htm文件中加入如下代码：            function window.onload() {         if(top.location != self.location){             var a = window.par
iframe自适应高度
清风的专栏
06-01 1279
http://caibaojian.com/iframe-adjust-content-height.html 内容变化 function reinitIframe(){     var iframe = document.getElementById("weixintemplate");     try{         var mainheight = $(iframe).con
js实现iframe自动自适应高度的方法
10-24
有时，我们希望Iframe能根据其内部内容自动调整高度，以避免滚动条的出现，提供更好的用户体验。本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。 首先，理解基本概念。Iframe的`height`属性决定...
iFrame 自动调整高度
11-06
### iFrame自动调整高度知识点详解 #### 一、前言 在网页开发中，经常会遇到需要将一个网页嵌入到另一个网页中的场景，这时候就会用到`<iframe>`标签。然而，由于`<iframe>`的高度默认是固定的，在内容发生变化时...
JavaScript实现iframe自动高度调整和不同主域名跨域
11-24
但是问题也来的iframe的高度是固定的不能与第三方网站很好的融合，又例如第三方网站使用了瀑布流插件，要滚动加载自动计算高度，那么先说跨域：iframe主域名不同跨域方法，假如网站 A.com B.com A 里面放入一个...
html中使用iframe框架嵌套高度自适应
最新发布
qq_45532769的博客
12-25 1593
html中使用iframe框架嵌套高度自适应
Iframe框架自动适应高度示例详解
csb5201314的专栏
12-30 825
<br /> iframe框架可以动态加载网页，并能嵌入到当前页面中，实现页面嵌套的功能。前几天做一个网页功能时需要用到自动调整Iframe框架的大小，找了资料才找到了答案。下面先来看下实现的代码：<br />【实现代码】 <br />        在这里有两个页面，第一个页面是iframe.html，iframe框架就在这个页面里，实现代码如下所示： <br /> <br />         <br />第二个页面是autoframe.html，它会自动调整子页的大小，实现代码如下所示(代码放在子页，
HTM嵌入其它高度自动html,html中包含其它页面
weixin_32480781的博客
05-30 154
1.IFrame框架的形式.Html代码 iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。它与不同的是，iframe可以嵌在网页中的任意部分。属性：　　　　　　name="..."定义的名字scr="..."定义显示的内容的来源frameborder="..."定义边界(0或1)margwidth="..."设置边界和其中内容之间的宽间距ma...
让嵌入的iframe完美自适应宽度、高度
ITSM/ITIL/网络安全/IT运维
10-14 9326
涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。 下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onload="adjustIframe();" frameborder="0" scrol...
JS实现iframe框架自适应高度
美奇软件开发工作室
03-11 436
1、DIV盒子里嵌入iframe框架，调用gg.html页面 &lt;div align="center"&gt;&lt;iframe id="main" style="width:100%;" name="main" src="gg.html" scrolling="no" frameborder="0" marginheight="
如何实现iframe(嵌入式帧)的自适应高度
whoami1731的专栏
01-02 507
如何实现iframe(嵌入式帧)的自适应高度2007-05-08 17:05 好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄
6种iframe高度自适应的方法
web前端开发
03-12 3万+
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...
iframe 根据内容自适应高度-终极解决方案
热门推荐
不啦草的草原
07-05 6万+
第一中方法： 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.getElementById("iframe").height=document.body.scrollHeight; 第二中方法： 在主页面 iframe onLoad 时间里面写 functi
动态修改iframe高度，从而自适应内容真实高度
Cheney的博客
09-08 3818
项目中遇到这样的情况，需要用到iframe，iframe中的内容也是自己写的页面，由于页面中元素是异步加载出来的，并不能提前预知其高度，这样就不能设置iframe的高度，导致iframe会出现滚动条，用户体验不好。所以我需要能根据内容动态改变iframe的高度。 dom结构如下 <!-- iframe --> <iframe id="iframe" scrolling="no" src="./iframe/page"></iframe> <!-- ./ifr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值