如何控制iframe的高度随内容的多而自动增长

最新推荐文章于 2021-01-27 12:30:55 发布
最新推荐文章于 2021-01-27 12:30:55 发布
阅读量1.4k 收藏
点赞数
分类专栏： 点滴积累 文章标签： iframe javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/containsoft123/article/details/4759091
版权

 方法1：在iframe中加入name属性。然后加上οnlοad="this.height=webb.document.body.scrollHeight+20"。例如：

<iframe src="huizAdd.jsp"  width="100%" height="100%"  scrolling="no" FrameBorder="0" id="webb" name="webb" οnlοad="this.height=webb.document.body.scrollHeight+20"></iframe>

 

方法2：在被iframe调用的文件</body>之后加入上面这段即可。

<script language="javascript">
if (window.parent.length>0){window.parent.document.all.webb.style.height=document.body.scrollHeight;}
</script>
其中webb是iframe的name。

containsoft123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
现代数据栈中的消费层
m0_73257876的博客
09-17 748
在完成了基础架构，产品体验，自助式分析的有效管控几方面的基础夯实之后，企业的数据分析成熟度自然就会开始逐渐上升，从现状分析，到原因诊断，再到未来预测，最终到达辅助决策智能的处方建议。尤其是后面两点，需要深度结合 AI 能力来进行赋能，实现数据驱动的高质量决策。分析成熟度从另一个角度看，迈向决策智能也不仅仅是分析能力的提升，还有一个重要的考量是要解决“最后一公里”问题，实现由数据驱动的业务流程。
前端刷题过程中遇到的重点题记录
weixin_44715144的博客
10-13 3万+
前言 此篇包括但不仅限于对前一篇博客知识点的补充 1.手写深度比较，模拟lodash isEqual 关于深度比较的理解：如果obj1和obj2的属性、值全部相等，但是令他们 = = =的时候，还是返回false，因为他们的地址不同，深度比较就是能对两个地址不同，值相同的对象进行比较，返回true。 function isObject(obj){ return typeof obj === 'object' && obj !== null; } function isEqual(o
控制iframe的高度随内容的多而自动增长
weixin_30642029的博客
10-08 215
<script language="javascript">if (window.parent.length>0){window.parent.document.all.newtest.style.height=document.body.scrollHeight;}</script> 只需在你被iframe调用的文件</body>之后加入上面...
iframe的高度随内容的多而自动增长
廖世勇
06-13 1259
让你的iframe高度变成动态的! if(window.parent.length>0){window.parent.document.all.newtest.style.height=document.body.scrollHeight;} 只需在你被iframe调用的文件之后加入上面这段即可!   IFRAME自适应网页 之前自己也碰到过这个问题，为了得到答案去网上搜索，
vue 官方推荐的好用的三方库
热门推荐
taotaobaobei的博客
12-31 3万+
自述文件 非常棒的存储库徽标 很棒的Vue.js 太棒了 与Vue.js相关的精彩内容精选清单 资源资源 官方资源 外部资源 工作门户 社区 会议活动 播客 YouTube频道 官方例子 讲解 例子 图书 博客文章 培训班 纪录片 使用Vue.js的项目 开源的 商业产品 应用/网站 互动体验 企业用途 A11y 组件和库 UI组件 表 通知 装载机 进度条 工具提示 覆盖 视差 图示 选框 菜单 减号加输入 轮播 图表 时间 日历 地图 音频视频 无限滚动 拉到刷新 降价促销 PDF格式 树 图形
我的html系统总结笔记
CCCC18287832105的博客
01-27 380
下面是我最近重新整理的html笔记，如有问题欢迎指出~ 由于JavaScript和JQuery笔记中图片较多，不宜放在文档里，如有需求欢迎下载： HTML系统性总结 基础 1.实体 &实体的名字; &nbsp; 空格****** &gt; 大于号****** &lt; 小于号****** &copy; 版权符号 2.meta标签 meta主要用于设置网页中的一些元数据，元数据不是给用户看，还要用来避免乱码 charset 指定
浅谈移动前端的最佳实践
weixin_30564901的博客
02-24 85
前言 这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距： 这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用 文中有误请您提出，以免误人自误 技术选型 单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，...
浅谈移动前端的最佳实践（转）
dianhang3622的博客
06-24 179
前言 这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距： 这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用 文中有误请您提出，以免误人自误 技术选型 单页or多页 spa（single page application）也就是我们常常说的web应用程序we...
读《增长黑客》有感
brizer的博客
06-30 2万+
前言 《增长黑客》作为互联网产品策划必读书籍，详细介绍了如何让产品发展更好，并列举了各种案例和方法论。笔者作为技术人员，阅读《增长黑客》后整理笔记于此。忙碌的朋友们可以从本文看看是否有兴趣和必要去拜读下《增长黑客》。 什么是增长黑客？ 首先看一个业界标杆增长黑客，高手的故事： 安迪·琼斯(Andy Johns)是硅谷的一名富有经验的增长黑客，曾效力于 Facebook、Twitter、Quora 等著名公司的增长部门。他的职业生涯或许可以让我们管窥一 斑。 Facebook一战成名 2008 年，当安迪加入
JAVA客户端调用WSDL的一点总结
containsoft123的专栏
11-12 5122
  最近对spark做了点探索。其中增加了一个功能，在客户端调用应用服务器上发布出来的WSDL，以实现登陆时获取应用服务器上的某些信息反馈到客户端。现在就简单讲讲在客户端调用WSDL的步骤吧。之前写过两个不同应用服务器之间相互调用WSDL的程序，用的是axis。所以这里就把以前的代码拷贝过来，稍做修改，并且将“axis.jar”，“axis-ant.jar”，“commons-discover
在 win xp 系统上手工安装sybase的ODBC驱动
containsoft123的专栏
08-15 4999
客户一老系统用的sybase作为数据库，现在我们要把里面的数据导出来，sybase版本是12.5的。以前没接触过sybase，不懂。一开始是用“bcp ezfrmsecurity..userslog out bcp.out -Usa -P123456 -Jcp850 -c”命令（dcp 为导出命令，ezfrmsecurity为数据库名，userslog为要导出的表，bcp.out为导出的文件名，s
用 hibernate 修改数据的奇怪问题。
containsoft123的专栏
12-02 3204
今天遇到一个很奇怪的事情，用hibernate 修改数据后，在数据库中查看，已经修改成功了。前台页面显示的内容却新旧数据交替出现，刷新一下页面可能是修改后的数据，再刷新一下，可能又是修改前的数据了。要过一段时间才能稳定显示出来。对hibernate刚上手，不熟悉，搞的我头都大了也没搞定。后来试着改代码，最终找到的问题所在。 我的hibernate修改数据的代码如下： Sessi
WebSphere调优的感受
containsoft123的专栏
10-31 1626
 系统升级到aix下的WebSphere后，速度一直比windows下的要慢，曾经在windows下部署了一个jboss4.2，WebSphere6.1，aix下部署了一个WebSphere6.1做测试。程序一样，三个环境连接同一个数据库（数据库环境是windows2003，sql2005），速度是 jboss上最快，大约是windows下的WebSphere6.1的两倍，是aix下的WebSph
webservice调用中奇怪的401错误
containsoft123的专栏
09-13 1159
因为公司几个系统的数据需要相互同步，所以这段时间在写接口，原则定的是用webservice来进行数据文件的传输（就是将数据按规则写到XML文件，然后传输给别的系统，或者接收别的系统发送过来的XML文件）。以前写webservice的发布和调用，涉及到的都是java平台下的。这次涉及到多个平台，有.net平台的，有php平台的，我自己这块的接口是java平台。刚开始有点犯晕，其他系统提供的是个htt...
分离数据库日志文件时遇到的一点问题
containsoft123的专栏
05-19 995
 今天客户反映数据库服务器上的磁盘空间不够了，进去一看，发现数据库日志文件太大了，于是就用自己常用的方法：1、停止应用服务器2、在控制台分离数据库3、进到文件目录下把数据库日志文件剪切到别的目录。（安全和备份起见）4、在控制台附加数据库以前走这四步就可以，这次在附加数据库的时候，附加不上。跟以前不一样的地方有，出现2个日志文件的路径，确定按钮式灰色的，不能点击。（这里不能上传图
几个AIX的命令简单介绍
containsoft123的专栏
08-23 635
 今天在AIX5.3上弄了下WebSphere的安装卸载。用到几个AIX的命令，记录一下： 1、查看进程：ps -e 2、结束进程：kill -9 pid （pid为进程ID） 3、查看进程占用CPU、内存使用情况：ps aux 4、查看系统内存使用情况：svmon -G 5、查看AIX是32位还是64位：bootinfo -K  （K要大写） 6、解压tar.gz文件：先执行：gzip -d
System.out.println
containsoft123的专栏
11-07 482
 我们写程序，一般try catch 后，喜欢用 System.out.println 来输出异常信息。在程序中也经常用System.out.println 来输出一些信息。这样对程序能很好的调试和跟踪。不过在网上看到过不少，对System.out.println 不赞成的说法，因为System.out 很耗资源。今天在一个网站上看到一个台湾的哥们说了这么一句话：“我寫過一支 jsp, 把以前的
dwr的配置
containsoft123的专栏
03-11 481
最近在项目用到DWR，第一次接触DWR，实际应用过程中也遇到了不少的问题，粗略的进行一下总结，有什么不对之处还请各位不吝赐教。         难点就是其配置过程，可分为以下几步： 到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar，放到工程的WEB-INF/lib目录下 配置web.xml，加入以下内容：Xml代码 servlet
vue使用 iframe，iframe的高度随内容变化怎么做
最新发布
07-24
在Vue中使用iframe并使其高度随内容变化，可以通过以下步骤实现： 1. 首先，在Vue组件中定义一个变量来保存iframe的高度，例如`iframeHeight`。 2. 在父组件中加载iframe，并添加一个监听器来处理iframe的加载完成事件。在加载完成后，获取iframe的内容高度。 3. 在父组件中使用`postMessage()`方法将iframe的内容高度传递给子组件。 4. 在子组件中添加一个监听器来接收从父组件传递过来的iframe高度。 5. 在子组件中使用`watch`属性或者计算属性来监听iframe高度的变化，并将该高度应用到iframe的样式上。 下面是一个示例代码： ```vue <template> <div> <iframe ref="myIframe" src="your-iframe-src" @load="handleIframeLoad"></iframe> </div> </template> <script> export default { data() { return { iframeHeight: 0 }; }, methods: { handleIframeLoad() { const iframe = this.$refs.myIframe; const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; const iframeContentHeight = iframeDocument.body.scrollHeight; window.addEventListener("message", event => { if (event.data && event.data.type === "iframeHeight") { this.iframeHeight = event.data.height; } }); iframe.contentWindow.postMessage({ type: "getIframeHeight" }, "*"); } }, watch: { iframeHeight(newHeight) { this.$refs.myIframe.style.height = `${newHeight}px`; } } }; </script> ``` 在子组件中，我们监听`iframeHeight`变量的变化，并将新的高度应用到iframe的样式上。 在父组件中，我们使用`postMessage()`方法向子组件传递iframe的内容高度，并在子组件中接收该高度，并更新`iframeHeight`变量。 请注意，在加载完成后，我们使用`postMessage()`方法将消息发送到iframe中，以请求获取iframe的内容高度。为了避免安全问题，我们使用`"*"`来指定接收消息的窗口。你可以根据实际情况调整这些代码来适应你的项目需求。 希望对你有所帮助！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值