[转]如何使IFrame的长宽与内容自动适应大小

最新推荐文章于 2022-09-02 15:57:37 发布
最新推荐文章于 2022-09-02 15:57:37 发布
阅读量1.1k 收藏
点赞数
分类专栏： 小技巧 文章标签： iframe datagrid asp.net javascript function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiemails/article/details/133023
版权
问题说明:
很多时候可能写一个只有一个DataGrid的 iframe 页面,  这个时候就界面有要求了: 如何使iframe的长宽与内容自动适应大小? 比如asp.net的只实现一个datagrid列表,因datagrid的行数不定,不能固定iframe的长宽.
解决方法:
在IFrame里的asp.net页面使用window.resizeTo方法:
比如datagrid 的id为grid, 写javascript:
 
function window.onload()
{
  var grid = document.getElementById(" grid");
  window.resizeTo(grid.offsetWidth, grid.offsetHeight)
}
谢谢2014
关注
专栏目录
Iframe实现自适应调用内容页的大小
J_JAKE（陆冷飞）的专栏
08-25 1223
在网站的页面布局中我们经常要用到IFRAME，而且有事需要IFARME能够自适应内容的大小，免得出现滚动条，太难看。下面是我从网上搜集来的代码，直接用上了，觉得挺好用的，帖出来共享被嵌页面：Inc_Left_Tech.aspx的头部代码...@ Page Language="C#" AutoEventWireup="true" CodeFile="Inc_Left_Tech.asp
kindeditor图片上传并且图片自动适应编辑器大小
only_qiqi的专栏
05-09 6348
使用kindeditor上传图片 使kindeditor中的图片适应编辑器大小 作者：kiss小祥   QQ 244556979 语言：java 在jsp里使用 版本：4.1.7  2013年4月21发布的，最新版哦 公司做博文发布系统，需要一个在线所见即所得的编辑器，找了好多 比如ckediter，ewebediter，kindeditor，ueditor。。。 最后还是选择
如何使IFrame的长宽与内容自动适应大小
Ben's Bloggings
10-10 3305
By Ben问题说明:使用Iframe, 很多时候可能有要求: 如何使iframe的长宽与内容自动适应大小? 比如asp.net的只实现一个datagrid列表,因datagrid的行数不定,不能固定iframe的长宽.解决方法:在IFrame里的asp.net页面使用window.resizeTo方法:比如dat
IFrame自适应长宽
Jason的专栏
11-11 516
IFrame自适应长宽:   <style type="text/css"> html, body { margin:0; padding:0; width: 100%; height:100%; overflow: hidden;} iframe { margin:0; padding:0; width: 100%; height:100%; -webkit-box...
iframe自适应内容大小
wenzi_li的专栏
08-13 254
   xml 代码 <iframe align="middle" frameborder=0 name="reportbill" width=100%  height="300"           onload="document.all['reportbill'].style.height=reportbill.document.body.scrollHeight...
html设置长宽高代码_对html中iframe的研究
weixin_42528222的博客
01-05 658
虽然平时不怎么用iframe，但经常在网上听一些前辈说iframe怎样怎样，今天索性对iframe来个大研究，那样就不必去记那些条条框框了，自己体验一遍比看什么都好。创建两个文件一个index.html和iframe.htmlindex.html<!DOCTYPE html> <html lang="en"> <head> <meta charse...
怎么在一个分节里面插入一个网页并且取消掉它的长宽限制
最新发布
09-24
- 对于Word中的对象，设置其大小属性为“自动”或“固定高度宽度”使其适应内容。 - 在`<iframe>` 中，通过设置样式`width` 和 `height` 为百分比或`auto` 来让浏览器自适应容器。 ```css iframe { width: 100%;...
html页面怎么适配拼接的大屏,大屏上的全屏页面的自适应适配方案
weixin_35949431的博客
06-03 4634
通常来说PC端的页面并不像移动端页面那样对屏幕大小和分别率有那么强的依赖。一般的页面都是取屏幕中间的一块宽度(1280px), 两边留白, 高度随着内容的长度滚动。这样无论窗口怎么变化，页面都是可用的。比如，我们的这个页面. 然而也有少数的页面，天生就是要在 pc 端全屏显示的，其中最为典型的代表就是全屏的 dashboard 页面。比如：当然，如果 dashboard 页面是内嵌在一些管理页面里...
WEB视频自适应（上）
itbrand的博客
09-28 1万+
有时需要在web页面中载入视频，我们会用到HTML5视频播放器代码，如下显示： <video width="320" height="240" controls="controls"> <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"&g
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
easyUI datagrid rownumber自适应宽度扩展JS
08-12
easyUI datagrid 自动调整行号大小
Iframe 自适应宽高
Murpny的博客
09-02 1799
Iframe 自适应宽高
让嵌入的iframe完美自适应宽度、高度
ITSM/ITIL/网络安全/IT运维
10-14 9352
涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。 下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onload="adjustIframe();" frameborder="0" scrol...
设置html iframe的高宽自动,在自适应布局页面上如何让iframe保持高宽比例
weixin_36315079的博客
06-03 4576
自适应布局网页设计(响应式布局)的好处是一套网页编码能在桌面电脑，平板，手机上根据屏幕的大小自动调整显示方式，极大的提升了用户使用友好性。但凡事有好处就有弊端，比如今天提到的如何如何让iframe保持高宽比例问题。如果网页中嵌入了一个视频iframe，我通常会给这个iframe设定固定的高度和宽度，这个高度和宽度的比例通常要适应视频的高宽必，比如16:9。但是，如果我们一旦写死了这个高度和宽度，当...
iframe自动根据内容调整大小
盐一酱的专栏
12-21 6600
出处：http://blog.163.com/xx_jun_/blog/static/20827520920125169374412 最近做网页开发，用到了iframe，其实以前也用这个，不过由于它不能自动根据内容调整大小，所以用的很少，也就没有仔细研究，可是最近做网页开发其中几个页面必须要用到iframe才能很容易的进行一些操作，不得以就研究了一下，如何让其自动根据内容来设定自身的大小
让iframe自适应大小 解决方案
小马的专栏
11-13 3万+
 第一种：        onload="this.height =   document.frames[src].document.body.scrollHeight" />例子：1，创建页面 test.html 。 页面中含有一个 iframe，name为 ifrname ，id为 ifrid， src 为 iframe.html页面。  scrolling="">
html 使iframe适应网页大小
09-06
使用HTML可以使iframe适应网页大小的方法有很多种。以下是其中一种常见的方法...通过上述方法，可以使iframe适应网页大小，无论网页是在桌面浏览器还是移动设备上展示，iframe都能够自动调整大小，以适应父容器的尺寸。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值