iframe 根据内容自己调整高度宽度

最新推荐文章于 2021-05-18 16:50:11 发布
原创 最新推荐文章于 2021-05-18 16:50:11 发布 · 398 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe #javascript #function

本文介绍了一种使用JavaScript动态调整iframe元素高度的方法。通过监听iframe加载完成事件并获取其内容的实际高度，确保iframe能够自动调整大小以适应内容，同时避免了页面布局因内容高度变化而产生的错位。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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;
      win.width =win.contentDocument.body.offsetWidth;
      }
     else if(win.Document && win.Document.body.scrollHeight)
     {
      win.height = win.Document.body.scrollHeight;
      win.width=win.Document.body.scrollWidth;
      }
    }
}
}
</script>
</head>
<body >
<center>
 <iframe id="idFrame" src="/member/" onload="Javascript:SetWinHeight(this)"  height="768"  frameborder=0 scrolling="no" ></iframe>
wangdetian168
关注
iframe根据页面内容自适应高度和宽度
09-03
为了解决这个问题，我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先，我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下： ...
JS动态修改iframe高度和宽度的方法
10-24
4. 响应窗口大小变化：可以添加事件监听器，如window.onresize事件，根据窗口的大小变化来动态调整iframe的高度和宽度。 5. 使用窗口方法间接控制尺寸：可以通过iframe元素的contentWindow对象访问其内部窗口，进而...
Iframe高度随内容自动调节
shaily读书学习
09-02 2289
以下两种方法会让网页中的iframe高度自动适应嵌入页的内容高度。方式一：在被嵌入页里写入代码假设main.htm文件内容：    则在iframe.htm文件中加入如下代码：            function window.onload() {         if(top.location != self.location){             var a = window.par
iframe根据内容自适应高度教程
热门推荐
李秀才的博客
02-15 1万+
博主今天调iframe根据内容自适应高度，发现好多坑。首先呢发现得到全文的高度在各大浏览器里的写法是不一样的，IE和火狐是一种写法，360和谷歌是另一种。所以呢就得根据浏览器的名称用不同的代码；后来用navigator.appName（官方说是得到浏览器的名称，就是个大坑）拿浏览器的名称，结果发现IE的appName是“Microsoft Internet Explorer”，其他浏览器诸如火狐、
iframe根据页面的内容自动调整高度
jvm
03-10 8182
iframe根据页面的内容自动调整高度
根据内容调整iframe的高度
wumingabc的专栏
03-25 919
放到HEAD区域：script language="Javascript">var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]//extra height in px to add to iframe in FireFox 1.0+ brow
让iframe根据内容自动调整高度~~~
【依然】
10-22 1752
iframe在网页中经常用到，尤其是不想用框架却想具有框架一样的导航与显示效果的时候。不用框架的原因，有时是受布局图片的限制，不太好划分矩形区域，比较适合用表格背景图片自动伸缩的形式，我最近就碰到一例。    网上很容易搜到在嵌入的页面的onload事件中调用如下代码的方法：    parent.document.all(self.name).height=document.body.scro
js控制iframe的高度/宽度让其自适应内容
10-26
因此，为了让iframe能够自动调整尺寸以适应其内容的大小，我们可以使用JavaScript来动态设置iframe的高度和宽度。本文将详细介绍如何利用JavaScript代码控制iframe的高度和宽度，使其能够自适应内容。 在使用...
实现iframe自适应内容的高度与宽度技术
为了解决这个问题，开发者们通常采取一些技术手段来让iframe能够根据内容动态调整高度和宽度。 ### iframe自适应的技术实现 1. **使用CSS样式实现：** - **视口宽度（ViewPort Width, VW）单位：** 通过将iframe...
用javascript动态调整iframe高度的方法
12-10
在描述中提到的方法是通过编写一段JavaScript代码，使得iframe能够根据其内部页面内容的高度自动调整。这段代码兼容多种浏览器，包括Internet Explorer、Netscape Navigator和Firefox。 首先，我们需要在主页面上...
根据内容自动调整iframe框架高度
zgqtxwd的专栏
05-01 383
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
iframe 根据内容调整高度
weixin_30252155的博客
11-19 124
最近在最tab页标签，准备用jquery-ui的tabs，但要链接到完整的html页面，jquery-ui的tabs是用div包装了内容，对于是一个完整的html会出现js冲突或不生效的问题，还是在div中添加一个irame 用iframe来显示，但iframe不像div会自动调整高度，但可以根据所加载的内容的高度，在iframe加载完成时，设置高度 function show...
iframe自动调整高度
穷人飞扬的专栏
12-18 1445
 //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 //定义iframe的ID var iframeids=["f1"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表
iframe根据子页面自动调整大小
weixin_34111819的博客
12-26 343
iframe根据子页面自动调整大小  //iframe高度自适应 　　function IFrameReSize(iframename) { 　　var pTar = document.getElementById(iframename); 　　if (pTar) {  //ff 　　if (pTar.contentDocument &amp;&amp; pTar.content...
根据内容自动调整IFrame高度
allenlf的专栏
10-31 253
有时为了方便使用Iframe，但被潜入的页面长度不是固定的，显示滚动条不仅影响美观还对用户操作带来不便，自动调整高度可以解决这个问题。 function f_frameStyleResize(targObj){ var targWin = targObj.parent.document.all[targObj.name]; if(targWin != null) { var Heigh
iframe根据内容自适应高度
weixin_41674235的博客
05-18 414
以下方法适用于两个网页同源 如果两个网页不同源，就无法拿到对方的DOM <iframe id="iframe" width="1200" src="" ></iframe> <script type="text/javascript"> window.onload = function () { document.getElementById("iframe").height=0; document.getElementById("iframe").heig
[HTML]让iframe随iframe的内容自适应宽度和高度
李大仁博客
08-16 1755
一个奇怪的需求，一个html页面A内的正中需要使用iframe打开另一个页面B，B页面的内容可长可短，要求用来显示B页面内容的iframe根据B页面的实际显示高度自适应调整高度。同时不能在修改A页面的代码。解决方法，使用iframe可以直接使用parent.parent.document控制父页面的document内容，但是需要注意进行自适应调整的时间，需要在B页面全部加载完成后才可以。实现代码，
让嵌入的iframe完美自适应宽度、高度
ITSM/ITIL/网络安全/IT运维
10-14 9535
涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。 下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onload="adjustIframe();" frameborder="0" scrol...
iframe高度宽度自适应
m0_38082271的博客
02-01 1万+
最近在项目中用到了iframe，写出来做个记录，能帮到大家最好。一.首先简单介绍一下iframe     iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。    所有浏览器都支持 &lt;iframe&gt; 标签。二.页面引用&lt;iframe src="index.html" id="myiframe" scrolling="no" frameborder="0" widt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值