js动态改变iframe高度 - 腾讯云开发者社区

文章/答案/技术大牛

发布

让动态的 iframe 内容高度自适应

使用iframe加载其他页面的时候，需要自适应iframe的高度这里加载了两个不同内容高度的页面至iframe中 1....有滚动条，可以看到iframe并不会因为内容高度自动撑开 2....在onload事件触发时，根据body的高度自适应iframe的高度 iframe-wrapper"> iframe name="iframe1...可以发现，高度虽然能自适应，不过只支持高度了“从小到大”的自适应如iframe2的内容比iframe1的高，后者动态加载出前者能自适应，但前者动态加载出后者就不行了，这种高度减小不了最后的解决办法是...在onload事件中动态设置高度为body高度之前，先将原高度还原为auto或空值可以用setTimeout(fn,0)将高度设置放到下一轮事件循环中执行，或者在 onbeforeunload 事件中先把高度设置为

8.7K5 1

iframe自适应高度原

="0" scrolling="no" width='100%' id="content_iframe" >iframe> //自适应 iframe...内容高度 function reinitIframe() { var iframe = document.getElementById("content_iframe...自适应内容的高度加载内容1 对应的js function getData(ifm){ document.getElementById("ifrm...document.body.offsetHeight 全部内容的高度（如果垂直有滚动条，也显示全部内容的高度） document.body.scrollWidth 内容的宽度（含边框

3.1K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

根据获取内部元素的高度，设置iframe的高度

iframe 是一个非常迷得一个元素，很难直接获取其内部元素的高度。...下面分享一个方法，可以获取 iframe 内部元素的高度： function setIframeHeight(id){ try{ var iframe = document.getElementById...(id); if(iframe.attachEvent){ iframe.attachEvent("onload", function(){ ...iframe.height = iframe.contentWindow.document.documentElement.scrollHeight; }); ...return; }else{ iframe.onload = function(){ iframe.height = iframe.contentDocument.body.scrollHeight

12.9K2 0

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

需求实现父 div 里面左右，上下动态分割 div，并上下改变父 div 的高度，并且宽和高都是按百分比（如图）。 ? 2....一个改变父 div 高度的 arrow，用于上下拖动 , 不能占有位置，所以要绝对定位，并定位到最右下角。...拖动改变上下的 label 时，向上时，label 的父 div 的高度变小，label 的父 div 相邻的下边的 div 高度变大。...3. js 实现代码： /** * name: split.js * author: biaochen * date: 2018-12-26 * */ $(function()...{ //鼠标横向、竖向、和改变父高度的上下操作对象 var thisTransverseObject, thisVerticalObject, thisArrowObject;

11.5K3 0

jquery 实现iframe 自适应高度

超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。注意别放错地方了哦。...iframe代码，注意要写ID iframe id="main" src="test.html" width="700" height="300" frameborder="0" scrolling=..."auto">iframe> jquery代码１： //注意：下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(function..."); var thisheight = $(document).height()+30; main.height(thisheight); }); jquery代码２： //注意：下面的代码是放在和iframe

3.5K4 0

真正解决iframe高度自适应问题

1.前言解决iframe高度自适应问题有两种方法 1.pym 2.手动设置iframe的高度本文主要是总结第二种实现方式，因为第一种pym.js插件我没用懂如果使用iframe时，遇到以下的需求...： iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度右侧不允许出现两个滚动条 iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化（如：下拉菜单，左侧导航栏等.../flexiframe.js"> ./flexiframe.js // 使用前先将子页面文档声明改为 //js可以直接使用，但是只支持同源下父页面可以通过contentWindow获取子页面的内容高度，跨域的下次再说。...，而是等于父元素iframe的高度？

6.4K3 0

JavaScript 处理Iframe自适应高度的问题

1.同域名下Iframe自适应高度的处理 iframe onload="Javascript:SetIFrameHeight(this)" src=".....嵌套的页面加载完毕的时候，运用onload事件来获取嵌套在iframe中网页的高度，然后赋值给Iframe的高度即可。...2.跨域时Iframe高度自适应在主页面和被嵌套的iframe为不同域名的时候，就稍微麻烦一些，需要避开JavaScript的跨域限制。...）嵌套iframe.html（域名为：http://www.phpq.net），当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度...，agent.html（域名为：http://www.ccvita.com）取得传递的高度，通过JavaScript设置main.html中iframe的高度。

2.4K2 0

iframe高度自适应的IE解决方案

变长iframe变长iframe变长iframe变长iframe变长iframe变长iframe变长iframe变长iframe变长'; } iframe变短 iframe变长 iframe变长 iframe变长... iframe变长 iframe变长 iframe变长 iframe变长 ...iframe变长 iframe变长 iframe变长转到一个新的页面<

1.4K8 0

网站引入iframe视频，如何实现高度自适应?

我想很多小伙伴在写博客的时候都能遇到一个令人头疼的问题，某一篇文章想用 iframe 引入一个外链视频，但是大小总是有问题，宽度可以固定到 100% ，但是高度比如用实际高度来表示，比如 100px,...但是问题来了，在不同的页面宽度下，视频的高度是一致的，就会导致一个很麻烦的问题, 看下面两个图， pc端移动端很明显，在pc端正常显示的视频，放到移动端高度就错位了，很不美观。...引入 jq ，（一般网站默认都有这个文件）加上一段 js 代码，最好放在网站底部，前即可。...$('iframe').wrap('iframe">') 在css文件的底部加上: .iframe{ position: relative; padding-bottom...0; width: 100%; height: 100%; } 这个时候再访问带有 iframe 视频的网页，不管宽度如何变化，高度可以随视频自适应。

2.9K1 0

iframe框根据内容自适应高度(100%可用)

iframe框根据内容自适应高度(100%可用) HTML: iframe id="iframe" src="自己写地址" name="content" frameborder="0" style=.../jquery-3.4.0.min.js"> $(function() {...$("#iframe").height(0); //用于每次刷新时控制IFRAME高度初始化 var height = $("#iframe").contents().height...() + 20; $("#iframe").height(height 高度700 } 在不显示滚动条的方式支持【滚轮】拉动。

2.7K2 0

JS 对指定iframe 全屏操作

首先要知道如果直接在iframe 页面调用requestFullScreen()是没有效果的，需要在当前iframe 的parent 页面调用，其实iframe的 DIV 也是这个原因。...document */ var parentDoc = parent.document; /* 定义一个接收元素的变量 */ var thisIframe = null; $("iframe

11.1K5 0

JavaScript自动设置IFrame高度(兼容各主流浏览器)

调用方式如下 iframe id="ifm" name="ifm" onload="SetIFrameHeight('ifm')" src="http://www.qq.com" /> function

1.3K2 0

如何实现iframe(嵌入式帧)的自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数...不敢独享，大家要是觉得有用，欢迎使用源代码如下 //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的...iframe的名称的列表 //用逗号把每个iframe的ID分隔....//定义iframe的ID var iframeids=["test"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 var iframehide...高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] &&

1.9K2 0

不使用定时器实现iframe的自适应高度

而且如果定时器一直开着(只要iframe存在)，总归不太好~ 这样就面临着一个问题：开发者可能需要对DOM进行修改，而iframe的高度如果需要改变，就必须由第三方开发者调用父层的，每一处DOM修改都要调用一次...… 把调整iframe高度的方法暴露给第三方开发者，显示不大合适。...自适应高度的问题，比较理想的办法是： iframe的onload前使用定时器修改iframe的高度，在onload后清除定时器，然后监听iframe它的document的DOMSubtreeModified...防止iframe页面加载资源过久，页面的高度显示上会有问题。...这样就让iframe开发者，只需要专注自身页面的逻辑结构，不用再考虑每修改dom之处都要调用修改iframe高度的方法。

2.7K2 0

【JS应用】Iframe 解决跨域

所以每个知识点都会写成文章，所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~ 跨域的东西，简直不要接触太多，网上相关内容一抓一大把，但是突然学习到一个关于前端解决跨域的方式就是利用 iframe...1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战解决场景现在我们在 a.com 的域名下有一个页面我们要请求 b.com 下的一个接口，很明显是会跨域的，无法直接请求今天我们使用 iframe...需要传递给真正需要数据的父页面（同样是 a.com 下）大概了解之后，我们来说一下简单流程现在有 a.com 下的内容页 A，需要请求接口 b.com/xxxx，但是跨域 1、内容页 A 嵌入一个隐藏 iframe...，iframe 加载 b.com 下的辅助页面 B 2、辅助页面B 开始请求接口 b.com/xxx，请求成功，存放到 window.name 3、隐藏 iframe 由页面B 跳转到 a.com 下另一个辅助页...比如请求的接口需要某些参数，这些参数是父页面提供的，所以就只能把这些参数放到 iframe 的 url 上以便通信拼接 url 函数 function parseUrl (url, param) {

20.3K1 1

iframe自动调整高度能在IE5里实现吗

偶已经理解到style="height:expression(main.document.body.scrollHeight)"只对第一次显示的内嵌网页有效，如果里面的内容更新必须把主页刷新一遍才能自动适应新的高度...{ try { document.all["shit"].style.height=shit.document.body.scrollHeight } catch(e){} } iframe...autoResize())" align="left" width="100%" marginwidth="0" marginheight="0" scrolling="no" FRAMEBORDER="0">iframe

8742 0

js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度： document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...： document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度（加边线）： document.body.offsetHeight document.body.offsetWidth

16.4K2 0

动态监听DOM元素高度变化

在这看似简单的需求当中，其实涉及到了一个难点，那就是怎样动态的监听到内容区域的高度变化？...因此，内容区域的高度是动态变化，且变化的时间点是未知的，那么怎样知道我们的内容区高度发生了变化呢？...既然 window 可以监听到 resize 事件，那么我们就可以利用 iframe 来达到同样的效果，具体做法就是在容器里面嵌套一个隐藏的高度为 100% 的 iframe，通过监听他的 resize...是用来动态监听content高度的变化的 */} iframe title={IFRAME_ID} id={IFRAME_ID} ref={ifr} /> ...监听 DOM 元素的高度变化，可以采用内嵌 iframe 的方式来解决。紧追技术前沿，深挖专业领域扫码关注我们吧！

6.5K3 0

动态设置ListView的高度原

-- lang: java --> //动态设置listView的高度 ListAdapter listAdapter = listView.getAdapter();

3K4 0

js判断本页面被 iframe 嵌套

viewport" content="width=device-width, initial-scale=1.0"> Document 我来自 iframe... // 判断本页面来自 iframe // 可行 if (window.frames.length !...= parent.frames.length) { console.log('在iframe中111'); } // 不可行 if (self.frameElement...&& self.frameElement.tagName == "IFRAME") { console.log('在iframe中222'); } // 可行 if...= top) { console.log('在iframe中333'); } // 禁止页面被别人iframe // if (top.location !

5.5K1 0

点击加载更多

让动态的 iframe 内容高度自适应

iframe自适应高度原

根据获取内部元素的高度，设置iframe的高度

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

jquery 实现iframe 自适应高度

真正解决iframe高度自适应问题

JavaScript 处理Iframe自适应高度的问题

iframe高度自适应的IE解决方案

网站引入iframe视频，如何实现高度自适应?

iframe框根据内容自适应高度(100%可用)

JS 对指定iframe 全屏操作

JavaScript自动设置IFrame高度(兼容各主流浏览器)

如何实现iframe(嵌入式帧)的自适应高度

不使用定时器实现iframe的自适应高度

【JS应用】Iframe 解决跨域

iframe自动调整高度能在IE5里实现吗

js获取各种高度总结

动态监听DOM元素高度变化

动态设置ListView的高度原

js判断本页面被 iframe 嵌套

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐