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

最新推荐文章于 2023-04-18 17:34:05 发布
最新推荐文章于 2023-04-18 17:34:05 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： Web 技术 Javascript 文章标签： iframe datagrid asp.net javascript function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SVG/article/details/130512
版权
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)
}
SVG
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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自适应大小（全屏已实现）
Make
03-07 3238
近日做项目中用到页面中嵌套iframe，想要实现自适应大小，并且在IE中按F11键全屏时也可以自适应大小。 在网上搜来的代码多数只适应页面中只有单个iframe情况，但笔者页面还有一个logo图片。 经反复实现，如下代码可实现： 1、页面加载实现：iframe的onload事件，之所以减去84，是logo图片的高度，把这个位置给让出来。 2、全屏实现：window.onresi...
iframe的用法，以及如何让iframe自动适应父及的宽度和高度
weixin_34318272的博客
10-18 1932
2019独角兽企业重金招聘Python工程师标准>>> ...
解决vue-print插件打印时表格宽度无法撑满自适应
ic_xcc的博客
07-16 9379
最近帮同事解决一个前端页面布局问题，技术背景vue+elementui，出现问题如下：点击详情表格布局一切正常（列数不固定，估计后端返回决定）点击打印之后的表格出现不能撑满，多出空白列的情况。 未点击打印时布局展示 经过各种调试主要解决由：tableLayout属性用来显示表格单元格、行、列的算法规则 ①auto：（默认值）列宽度由单元格内容设定； ②fixed: 列宽由表格宽度和列宽度设定； ③inherit：规定应该从父元素继承table-layout属性的值。 /设置表格...
【JS】使用iframe打印浏览器页面
zlting_的博客
04-18 1818
当某些甲方爸爸有浏览器打印需求时，项目中可以使用iframe标签来实现此功能。
iframe嵌入网页时，页面大小怎么自适应
五花漏的博客
02-24 2万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
iframe自动根据内容调整大小
盐一酱的专栏
12-21 6413
出处：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 自适应
抓饭不吃皮牙子
10-09 2049
function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.
iframe根据内容自动等比例缩小
Eight_zhu的博客
11-21 6495
在h5网页中，嵌套第三方页面，使用iframe，然后根据第三方内容，等比例缩小，填充iframe。主要解决h5iOSapp,在线查看文件的问题。思路：将iframe宽高设置200%，然后缩小0.5 #iframeA { position: absolute; transform: scale(.5, .5) translate(-50%, -50%); ...
多个iframe自动调整大小的问题
01-19
怎样用一个函数，自动调整这个页面里所有iframe的高度呢？ function change_size(iframe) { iframe.style.height=info_content.document.body.scrollHeight+1+”px”; } 我用过这种方式，但是等号后面的第一个对象...
自动设置iframe大小的jQuery代码
10-26
自动设置iframe的宽度在应用中还是比较广泛的，本文使用jquery实现一下，感兴趣的朋友可以参考下
嵌入到HTML的iframe自动适应大小
03-19
让嵌入到HTML的iframe自动适应大小
javascript firefox 自动加载iframe 自动调整高宽示例
10-26
iframe 自动获取onload高宽以及iframe 自动加载，具体实现如下，感兴趣的朋友可以参考下
自动适应iframe右边的高度
01-21
在开发项目过程中，用iframe嵌套，会发现一个问题，用iframe嵌套的html结构右边不会自动适应高度。 这时候找到了一个解决方法： <iframe name=my_iframe id=mainframe marginheight=0 marginwidth=0 frameborder...
User Interface Process(UIP) Application Block 2.0 研究总结
Ben's Bloggings
12-02 5983
By BenUser Interface Process (UIP) Application Block - Version 2.0 环境: WinXP, SQL Server 2000 + SP3A, .Net 1.1, UIP 2.0研究思路: 1. 了解熟悉UIP和它的架构2. 安装UIP3. 研究demo, 了解UIP实际意义4. 完成UIP应用的h
ASP.NET 2.0 Beta 1研究总结
Ben's Bloggings
12-22 5324
By BenASP.NET 2.0 Beta 1研究总结 1. 课题简介ASP.NET 2.0 的出现, 更方便了开发者的系统开发, 更全面强大的设计工具Visual Studio .Net 2005 beta1 大大提高开发效率. 2. 研究过程2.1. 概述VS.NET 2005 beta1 以强大的IDE环境, 加上豪华的功能开发界面, 将ASP.NET 1.
递归算法在javascript中使用的小技巧 (javascript的对象封装方法介绍)
Ben's Bloggings
11-23 4820
By Ben比如求 10! 的结果有两种解法:法一:一般的做法://=========================== document.writeln("递归算法一:"); //=========================== function factorial(x) {       if(x               return 1;       els
做文章系统时, 如何让长篇的文章自动换行
Ben's Bloggings
10-11 4302
By BenHTML:法一:TABLE-LAYOUT: fixed">            word-wrap:break-word;width:90%;white-Space:pre;">      aaaaaaaaaaaaa                dddddddddddddddddddd              fffffffffff      ffffffffffffff
html 使iframe适应网页大小
最新发布
09-06
使用HTML可以使iframe适应网页大小的方法有很多种。以下是其中一种常见的方法...通过上述方法，可以使iframe适应网页大小，无论网页是在桌面浏览器还是移动设备上展示，iframe都能够自动调整大小，以适应父容器的尺寸。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值