js设置iframe高度 - 腾讯云开发者社区

文章/答案/技术大牛

发布

根据获取内部元素的高度，设置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

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

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

1.3K2 0

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

是的

没有找到

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

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

bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

用js控制bootstrapTable的高度有几种方法 1、 ...$(window).height() - 120 }); 两者的区别是table元素中第二种方法是含有data-toggle="table" 及data-height="350",js...，当内容的高度大于窗口的高度就有滚动条，当内容的高度小于窗口的高度，container的高度设置为内容的高度完整的js如下： $(document).ready(function() { //...设置bootstrapTable起始的高度 $('#tableTest1').bootstrapTable({ height: $(window).height() - 120 });...//当表格内容的高度小于外面容器的高度，容器的高度设置为内容的高度，相反时容器设置为窗口的高度-160 if ($(".fixed-table-body table").height() < $

24.3K2 0

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

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

8.7K5 1

真正解决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="...../Home/b" id="win" name="win" width="100%" height="1"> iframe> 当然此处我用的是Asp.Net MVC 此处src设置为路由结构 iframe中网页的高度，然后赋值给Iframe的高度即可。...）嵌套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变长转到一个新的页面返回frm.html 在IE8上失效(不过IE8上可以通过设置源代码的

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

iOS 设置tableViewCell的高度

前言 iOS tableView的cell在显示之前必须获取cell的高度，如果cell的高度都一样，统一设置就行了，但是cell的高度不统一的话就要一一设置了，在ios8之前，需要自己手动去计算，iOS...-> CGFloat { return 50; } 坑这样做有一个坑在网上找了好久没找到解决方法，试了好久终于找到了解决方法假如UITableViewCell中就放一个view 设置该...view以下约束宽度和高度(假设为宽100 高100) 水平居中距离顶部距离(=10) 距离底部距离(>=10) 这样设置之后UITableViewAutomaticDimension就可以算出该cell...(Priority)就起作用了，一般我们添加约束优先级默认都是1000，系统自己添加的这个约束也是1000，我们只要降低我们自己view高度约束的优先级就行了，设置高度的约束优先级为750，这样当系统估算后添加估算高度后...，我们自己设置的高度就不起作用了。

3.6K3 0

antd table 设置固定高度

问题描述我再使用antd 的table ，现在有个弹窗，弹框里有列表table,发现设置完是这个样子。太长了，我要固定下table 高度，想想用css 样式设置下height 和滚动不就行了。...解决方案官网api 有这么一个属性，设置下即可计算滚动区域。

5.3K4 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高度的方法暴露给第三方开发者，显示不大合适。...自适应高度的问题，比较理想的办法是： iframe的onload前使用定时器修改iframe的高度，在onload后清除定时器，然后监听iframe它的document的DOMSubtreeModified...防止iframe页面加载资源过久，页面的高度显示上会有问题。...而监听DOMSubtreeModified事件的主要作用是为了省去在iframe内修改dom时，每一次都要主动调用一次修改iframe高度的方法。...这样就让iframe开发者，只需要专注自身页面的逻辑结构，不用再考虑每修改dom之处都要调用修改iframe高度的方法。

2.7K2 0

【JS应用】Iframe 解决跨域

1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战解决场景现在我们在 a.com 的域名下有一个页面我们要请求 b.com 下的一个接口，很明显是会跨域的，无法直接请求今天我们使用 iframe...，iframe 加载 b.com 下的辅助页面 B 2、辅助页面B 开始请求接口 b.com/xxx，请求成功，存放到 window.name 3、隐藏 iframe 由页面B 跳转到 a.com 下另一个辅助页...嵌入了 B，并且全局设置了一个函数 getData 这个函数的作用是，为了给 C页面调用，传入接口的数据的 window.getData=function(data){ 辅助页 B B 页面当然是用于请求接口了...并取其中的字段 parentFunc ，就可以知道函数名啦优化随着请求越来越多，生成的全局随机函数肯定会越来越多，并且是一次性的，不会再被使用，留着根本没用，还占用资源所以我们最好手动清除他，所以你看到在设置全局函数时...，回调执行完之后就执行设置为 null window[funcName] = function (response) { 没错，封装的函数我们已经看完了，我们还是有必要来看下怎么使用的啊封装函数的实践

20.3K1 1

动态设置ListView的高度原

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

3K4 0

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

iframe内部DOM设置样式引发的思考

于是又想到通过js来控制iframe内部DOM的样式。...iframe内部的DOM中body元素有个min-width:1200px的属性设置，导致我设置iframe的宽高时，iframe总会出现滚动条。而我的目的就是要消除滚动条。...除了设置iframe内部DOM的样式还有别的方法吗？是否可以通过iframe的属性设置来达到目的？于是将iframe标签的相关属性都看了一看，最终通过设置iframe的属性解决问题。...iframe相关属性 allow用于为iframe>指定其特征策略。...allowfullscreen设置为true时，可以通过调用iframe> 的 requestFullscreen() 方法激活全屏模式。 height 默认值150。 width 认值是300。

2.8K2 0

点击加载更多

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

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

iframe自适应高度原

jquery 实现iframe 自适应高度

bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

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

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

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

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

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

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

JS 对指定iframe 全屏操作

iOS 设置tableViewCell的高度

antd table 设置固定高度

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

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

【JS应用】Iframe 解决跨域

动态设置ListView的高度原

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

iframe内部DOM设置样式引发的思考

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐