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

最新推荐文章于 2025-10-26 10:40:37 发布

原创最新推荐文章于 2025-10-26 10:40:37 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #datagrid #asp.net #javascript #function

小技巧专栏收录该内容

5 篇文章

订阅专栏

博客涉及信息技术领域，包含ASP.NET、JavaScript等技术，还提到iframe和datagrid，这些技术在开发中有着重要作用，可用于构建网页、实现数据展示等功能。

问题说明:

很多时候可能写一个只有一个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)

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

谢谢2014

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

kindeditor图片上传并且图片自动适应编辑器大小

only_qiqi的专栏

05-09

6444

使用kindeditor上传图片使kindeditor中的图片适应编辑器大小作者：kiss小祥 QQ 244556979 语言：java 在jsp里使用版本：4.1.7 2013年4月21发布的，最新版哦公司做博文发布系统，需要一个在线所见即所得的编辑器，找了好多比如ckediter，ewebediter，kindeditor，ueditor。。。最后还是选择

前端高频面试题汇总(css,html)

每天都要努力学习哦~~

01-03

1705

H5 的新特性有哪些？C3 的新特性有哪些？ H5 新特性 1、拖拽释放(Drap and drop) API ondrop 2、自定义属性 data-id 3.语义化更好的内容标签(header,nav,footer ,aside, article, section) 4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay 5、画布 Canvas 6、地理(Geolocation) API 7. 本地离线存储 localSt

参与评论您还未登录，请先登录后发表或查看评论

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

Ben's Bloggings

10-10

3381

By Ben问题说明:使用Iframe, 很多时候可能有要求: 如何使iframe的长宽与内容自动适应大小? 比如asp.net的只实现一个datagrid列表,因datagrid的行数不定,不能固定iframe的长宽.解决方法:在IFrame里的asp.net页面使用window.resizeTo方法:比如dat

IFrame自适应长宽

Jason的专栏

11-11

563

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自适应大小？iframe-resizer的终极指南

最新发布

gitblog_00935的博客

10-26

928

在网页开发中，IFrame的尺寸自适应一直是令开发者头疼的难题。**iframe-resizer**作为一款强大的开源工具，能够让同域和跨域IFrame自动调整大小以适应其内容，完美支持窗口/内容调整、页面内链接、嵌套和多个IFrame等场景，彻底解决IFrame尺寸管理的痛点。 ## ???? 为什么选择iframe-resizer？传统IFrame使用中，开发者常常面临内容溢出、滚动条混乱、...

Iframe实现自适应调用内容页的大小

J_JAKE（陆冷飞）的专栏

08-25

1276

在网站的页面布局中我们经常要用到IFRAME，而且有事需要IFARME能够自适应内容的大小，免得出现滚动条，太难看。下面是我从网上搜集来的代码，直接用上了，觉得挺好用的，帖出来共享被嵌页面：Inc_Left_Tech.aspx的头部代码...@ Page Language="C#" AutoEventWireup="true" CodeFile="Inc_Left_Tech.asp

iframe自适应内容大小

wenzi_li的专栏

08-13

288

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

716

虽然平时不怎么用iframe，但经常在网上听一些前辈说iframe怎样怎样，今天索性对iframe来个大研究，那样就不必去记那些条条框框了，自己体验一遍比看什么都好。创建两个文件一个index.html和iframe.htmlindex.html<!DOCTYPE html> <html lang="en"> <head> <meta charse...

响应式iframe调整高度的jQuery插件介绍

在插件执行后，iframe会根据其内容的宽度自动调整高度，从而确保内容在iframe窗口中能够完整且适应地展示，同时保持预设的长宽比，实现响应式布局。" 知识点详细说明: 1. **jQuery插件介绍**: jQuery是一个快速、...

怎么在一个分节里面插入一个网页并且取消掉它的长宽限制

09-24

- 对于Word中的对象，设置其大小属性为“自动”或“固定高度宽度”使其适应内容。 - 在`<iframe>` 中，通过设置样式`width` 和 `height` 为百分比或`auto` 来让浏览器自适应容器。 ```css iframe { width: 100%;...

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

Iframe 自适应宽高

Murpny的博客

09-02

2004

Iframe 自适应宽高

让嵌入的iframe完美自适应宽度、高度

ITSM/ITIL/网络安全/IT运维

10-14

9674

涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onload="adjustIframe();" frameborder="0" scrol...

Html框架frame属性及使用方法

hj976122401的专栏

11-07

5322

框架组标记框架标记语法格式：元素（双标签）语法格式： border="" framespacing=""> ....... 属性： cols 垂直切割窗口（如左右分割两个窗口）接受整数值，百分数，*（*代表占用余下空间）数值的个数代表分成的部分数目，要以逗号分隔。例：cols="30,*,50%"可以切成三个视窗，第一部

IFrame根据内容自动适应高宽（同域）

hzgang的专栏

08-15

1600

width="390" height="350" allowtransparency="0" frameborder="0" marginwidth="0" marginheight="0"> function reinitIframe() { var iframe = document.getElementById("frame_content

iframe嵌入网页时，页面大小怎么自适应

热门推荐

五花漏的博客

02-24

3万+

问题描述：页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果：可以看到嵌入的页面只露出了一部分。而我们希望：嵌入的页面能够完全展示在容器中。思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧

设置html iframe的高宽自动,在自适应布局页面上如何让iframe保持高宽比例

weixin_36315079的博客

06-03

4760

自适应布局网页设计(响应式布局)的好处是一套网页编码能在桌面电脑，平板，手机上根据屏幕的大小自动调整显示方式，极大的提升了用户使用友好性。但凡事有好处就有弊端，比如今天提到的如何如何让iframe保持高宽比例问题。如果网页中嵌入了一个视频iframe，我通常会给这个iframe设定固定的高度和宽度，这个高度和宽度的比例通常要适应视频的高宽必，比如16:9。但是，如果我们一旦写死了这个高度和宽度，当...

如何动态控制IFrame的长和宽

小鸟的窝

06-09

2763

主页面要放置一个IFrame用于嵌套显示子页面的信息，但是子页面的数据多少不一，导致子页面可能会很长或很短，要动态控制IFrame的高低随子页面的长短而变化。主页面如下： New Document 子页面只需要做如下处理即可：在页面的最下端添加如下JS脚本： window.parent.document.all("frmTest").style.height = document

调整iframe的大小以适合内容（仅限同一域）

CSS 初学者指南

06-22

2371

通常，您为iframe设置宽度和高度。如果里面的内容更大，滚动条就足够了。下面的脚本试图通过动态调整iframe的大小以适应其加载的内容来解决此问题。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'>&l...