iframe根据内容自适应高度

最新推荐文章于 2024-08-18 21:47:24 发布
最新推荐文章于 2024-08-18 21:47:24 发布
阅读量1.3k 收藏
点赞数
分类专栏： JS 文章标签： HTML JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42413925/article/details/80618692
版权

方法一：

function IFrameReSize(iframename) {
    var pTar = iframename;
    if (pTar) {  //ff
        if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
            pTar.height = pTar.contentDocument.body.offsetHeight;
        } //ie
        else if (pTar.Document && pTar.Document.body.scrollHeight) {
            pTar.height = pTar.Document.body.scrollHeight;
        }
    }

  }
方法二：

function reinitIframe(){
    var iframe = document.getElementById("testIframe");
    try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.height = height;
        // console.log(height);
    }catch (ex){}
}
使用此方法，最好在html加上这句话 
<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

qq_42413925
关注
专栏目录
iframe根据页面内容自适应高度和宽度
09-03
iframe根据引用的页面内容自适应高度和宽度，直接查看例子，简单易操作
js实现iframe自动自适应高度的方法
10-24
有时，我们希望Iframe能根据其内部内容自动调整高度，以避免滚动条的出现，提供更好的用户体验。本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。 首先，理解基本概念。Iframe的`height`属性决定...
iframe根据内容自适应高度教程
热门推荐
李秀才的博客
02-15 1万+
博主今天调iframe根据内容自适应高度，发现好多坑。首先呢发现得到全文的高度在各大浏览器里的写法是不一样的，IE和火狐是一种写法，360和谷歌是另一种。所以呢就得根据浏览器的名称用不同的代码；后来用navigator.appName（官方说是得到浏览器的名称，就是个大坑）拿浏览器的名称，结果发现IE的appName是“Microsoft Internet Explorer”，其他浏览器诸如火狐、
探索HTML中的“iframe”标签——WEB开发系列12
最新发布
一条晒干的咸鱼的博客
08-18 1641
现代网页开发中，​​​​ 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 ​​iframe​​ 标签，包括设置高度和宽度、移除边框，以及如何用 ​​iframe​​​ 来显示目标链接页面。
(转)iframe自适应
jackyrongvip的专栏
08-31 1165
http://www.blogjava.net/josson/archive/2008/01/17/175914.html1、目的系统通过一内嵌页面(iframe) 来展现网页内容（也包括内嵌页中再嵌一个网页），这将会引起如下几个问题：a.不同的网页内容多少不一致，导致iframe的高度无法与实现内容或浏览器高度相匹配。b.窗口缩放时，不能iframe不能进行自动调整。
如何让iframe框架自适应内容高度
关注前端
11-09 4616
$(function(){   var document_height="";   //iframe自适应高度   var timeIframe;   window.onload=function(){   timeIframe=setTimeout(GetIframeStatus,10);   }   function GetIframeStatus()   {   var
iframe根据内容自适应
小楼一夜听春雨
03-07 3853
使用iframe的时候，往往因为高度的问题发愁，一般情况下，我们都要让iframe进行自适应才能使得页面展示体验更好，如何自适应了？首先我们要先得到资源的文档流的高度和脱离文档流的高度，便可以做到根据内容的高度进行动态改变iframe的高度，从而实现自适应。 文档流的高度很容易获取到： let h1 = iframe.contentWindow.document....
jQuery简单实现iframe的高度根据页面内容自适应的方法
01-19
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考，具体如下： 方式1： //注意：下面的代码是放在和iframe同一个页面中调用 $(#iframeId).load(function () { var ...
JavaScript 处理Iframe自适应高度(同或不同域名下)
10-27
首先，我们来探讨同域名下的Iframe自适应高度的处理方法。当Iframe及其所嵌入页面位于同一域名时，可以通过JavaScript来获取嵌入页面的实际高度，并在Iframe的onload事件中设置其高度。具体做法是，在Iframe标签中...
iframe窗口高度自适应的又一个巧妙实现思路
12-10
在本文中，我们将探讨一种巧妙的方法来解决在跨域环境下，使用`iframe`实现窗口高度自适应的问题。问题的核心在于，由于JavaScript的同源策略限制，我们无法在不同域名之间直接进行DOM操作或数据交换。为了解决这个...
iframe 自适应内容高度
oarsman的专栏
08-18 767
这一阵子，又做了一些
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题
06-03
Iframe自动根据类容改变自己的大小，解决Iframe设置高度后无法缩小！拜一个高人所赐，特表示感谢！
iframe高度自适应内容
liudanyang_21的博客
06-20 146
JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了 iframe内容未知，高度可预测 这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用javascript改变高度。常用的兼容代码有： function setIframeHeight(iframe)
iframe根据内容自动伸缩
淡泊以明志，宁静以致远.
08-01 903
function SetCwinHeight(){var cwin=document.getElementById("cwin");if (document.getElementById){if (cwin && !window.opera){if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)cwin.height
【前端】iframe根据子内容高度进行自适应
loyd3的博客
09-08 2523
针对多个iframe的情况 iframe标签 <iframe width="100%" height="100%" src="/..."></iframe> js代码 function iframeLoad() { var ifms = document.getElementsByTagName("iframe"); //获取iframe for (let index = 0; index < ifms.length; ind
获取Iframe页面高度，并将高度赋值给Iframe
小施_za的博客
11-13 9768
页面布局使用iframe嵌套，iframe设置高度根据页面内容的高度自适应。代码如下（设置父级页面）： HTML部分： JS部分： //获取iframe子页面内容高度给iframe动态设置高度 function iFrameHeight() { var ifm= document.getElementById("iframeId"); var subWeb = docume
php iframe 自适应高度,iframe自适应高度
weixin_28713299的博客
04-01 275
很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事，今天吾爱编程为大家介绍一下iframe自适应高度的方法，有需要的小伙伴可以参考一下：1、需求分析：使页面中的iframe可以自适应高度，避免页面高度增加的时候页面和iframe会同时出现滚动条。2、方法一：在iframe上面直接加onload的方法，使其自适应< iframe id ="iFrame1" name ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值