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

最新推荐文章于 2024-05-30 16:18:48 发布

原创最新推荐文章于 2024-05-30 16:18:48 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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

本文介绍了一种使用JavaScript实现Iframe内ASP.NET页面中的DataGrid列表自动调整iframe大小的方法。通过监听页面加载完成并获取DataGrid元素尺寸来动态调整iframe的高度和宽度。

By Ben

问题说明:

使用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年卡可用

立即使用

mengtech

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

only_qiqi的专栏

05-09

6443

使用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嵌入网页时，页面大小怎么自适应

热门推荐

五花漏的博客

02-24

3万+

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

js调用iframe实现打印页面内容的方法

12-12

1、程序说明1) 此程序可以实现选择页面中的区域进行打印，以iframe方式进行打印；2) 与原生态的print() 区别在于，取消打印页面后可以完整保留当前访问页面的内容。2、代码部分 1) JS 函数：代码如下:function do_print(id_str)//id-str 打印区域的id{var el = document.getElementById(id_str);var iframe = document.createElement(‘IFRAME’);var doc = null;iframe.setAttribute(‘style’, ‘position:absolut

iframe自动根据内容调整大小

盐一酱的专栏

12-21

6826

出处：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="">

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

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

适用于现实项目的响应式iframe解决方案

标题中的“响应式 iframe 解决方案”明确指出了该项目的核心目标：让嵌入在网页中的 iframe 能够根据容器或视口大小自动调整其宽高比，从而避免出现滚动条溢出、内容裁剪或比例失真等问题。传统 iframe 的主要缺陷...

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

最新发布

09-24

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

iframe 自适应

牛肉胡辣汤

10-09

5668

function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.

iframe内嵌网页自适应缩放以展示源网页的比例尺寸

m0_65607651的博客

05-30

2557

iframe内嵌网页自适应缩放以展示源网页的比例尺寸

超强兼容iframe自适应大小，放大缩小都可以

shitouwoai的专栏

04-10

4245

function iFrameHeight() { /*** * ifram自适应大小 * **/ var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentWindow.documen

iframe根据内容自动等比例缩小

Eight_zhu的博客

11-21

6943

在h5网页中，嵌套第三方页面，使用iframe，然后根据第三方内容，等比例缩小，填充iframe。主要解决h5iOSapp,在线查看文件的问题。思路：将iframe宽高设置200%，然后缩小0.5 #iframeA { position: absolute; transform: scale(.5, .5) translate(-50%, -50%); ...

th固定宽度属性

阿甘兄

06-13

7625

设置属性：fixed="true" <th rowspan="2" width="53px" fixed="true">序号</th>

如何根据iframe内嵌页面调整iframe高宽

weixin_34122604的博客

12-03

290

问题来自于工作的实例，我的一个域名A的页面，有个iframe，它可能内嵌了另一个域名B的页面，也可能内嵌域名C的页面，但是呢，B和C的页面大小是不一样的，特别是高是不一样的高，那么我如何设置iframe的height属性呢？这个本质就是跨域设置的问题。一种解法 B和C提供一个jsonp接口，让有iframe的页面A来调用，这个jsonp接口的目的就是告诉A，我的页面的高宽各是多少。第...

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

编程者说的博客专栏

12-11

2万+

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

IFrame 根据嵌入页面自动调节大小

weixin_30617737的博客

08-21

744

很多人估计会遇到这样的情况，在IFrame嵌入某些页面，总会出现滚动条，那么有没方法，可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢？答案是肯定的，经过查找，本人发现用IframeResizer脚本可以很好解决此问题，并且它是跨域名的，即使嵌入的是第三方页面，不需繁杂处理，几个步骤就可以使它自动调节宽度和高度。 1。首先下载iframe-resizer最新版...

iframe的几个常见问题

weixin_34059951的博客

08-16

418

1.iframe的透明问题除了IE家族，其他标准浏览器默认iframe是透明的。对应IE7+ 的浏览器：加个allowtransparency="true"如下 <!DOCTYPEHTML><html><head><title>无标题</title></head><...