在子页面控制父页面iframe的高度

最新推荐文章于 2021-07-02 17:10:56 发布
最新推荐文章于 2021-07-02 17:10:56 发布
阅读量603 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dilemma_me/article/details/103432003
版权
父页面：
 <iframe id="iframe" src="/html/indexCon.html" scrolling='no' marginWidth='0' frameSpacing='0'
        marginHeight='0' frameBorder='0' noResize width='100%' height='100%' vspale="0" style="vertical-align:bottom;"></iframe>
子页面：
<body onload="IFrameResize()">

</body>

<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script>
    function IFrameResize() {
        var obj = parent.document.getElementById("iframe"); //取得父页面IFrame对象
        obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度
    }
    $(window).resize(function () {
        IFrameResize()
    });
</script>
Archer_yy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 装载iframe子页面，自适应高度
10-30
javascript 装载iframe子页面，自适应高度
iframe嵌套的html高度,多层嵌套iframe 自适应高度的解决方法
weixin_42364640的博客
06-20 294
参考文章:下面的是别人写的:我在页面main.htm中包含框架src='t1.htm'>其中，通过main.htm导航条，动态调整main iframe的内容。实现功能导航。t1.htm中也包含框架name="t1"src="t2.htm">其中，t1.htm主要为某个功能的操作按钮，通过某些操作生成结果在t1 iframe中显示。t2.htm中是高度很大的页面，不含其他的框架。我想要...
iframe标签嵌入页面，自适应宽度和高度问题
T_P_F的博客
06-30 1262
<html> <head> <style> body{ margin: 0px 0px 0px 0px; overflow: hidden } </style> </head> <body> <div style="height: 100%"> <iframe id="alimamaifrm" name="alimamaifrm" height="100%" wid.
跨域从子页面设置父页面iframe高度（前提，两个域名下都有操作权限）
ivyandrich的专栏
04-23 3767
如果跨域的话，也可以从子页面调整父页面里IFRAME的高度，但是前提是，这俩域名下你都有权限操作。 具体思路如下： [img=http://img.bbs.csdn.net/upload/201404/23/1398238646_194388.jpg][/img] 父页面域名为 ： www.a.com IFRAME里子页面域名为 ： www.b.com [color=
关于前端iframe的高度自适应和子父调用
u010652906的专栏
05-24 381
iframe父页面调用子页面元素和方法 //父级调用子页面的class属性元素 iframe.contentWindow.document.getElementsByClassName("元素class")； iframe.contentWindow.document.getElementById("元素id"); iframe子页面调用父页面元素和方法 window.parent.docum...
iframe高度100% html,iframe height 100% 无效问题
weixin_42512441的博客
07-02 1721
应用场景： vue + mui，用hbulider打包后，嵌套其它网页，在网上查HTML页面嵌套 的解决方案，选择使用ifame标签时遇到了height设置无效的问题1. 通过设置html和body高度，ifame设置height：100%才有效，代码如下：content="width=device-width, user-scalable=no, initial-scale=1.0, maxim...
【同域】根据iframe中引用的网页的高度来修改父级页面的iframe高度-iframe自适应子页高度
Love.Hope.Faith
12-20 6135
如题。         网上提供了很多方法。但是在进行测试的时候都会出现这样那样的问题。在一个好同学的帮助下，我使用了这种方法来实现了这个功能。         在父级页面iframe元素外部使用一个元素包围住。然后设置的初始高度不需要设置，设置好宽度，然后被包围的iframe的高度宽度均设置为100%；你也可以不用div，直接通过子页中的方法来修改父级页面iframe的高度。      
为什么iframe的高度和宽度不能随内容而自动调节!
曹秉毅的blog
10-22 1250
    最近,模仿一个软件的时候,发现iframe的高度和宽度不能随内容而自动调节,除非指定iframe 的宽度和高度为具体的值;问了很多朋友也都不知道.很是伤脑筋啊!后来,在W3SCHOOL中的"HTML 标签"一节中看到这么一句话:在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素.我再看看自己写的页面,但是transit
jquery 子页面控制父页面IFRAME的高度
热门推荐
qq_29663071的博客
04-18 1万+
$(window.parent.document).find("#mainFrame").css("height",""+mainFrameheigth+"px"); 　　jquery取得iframe元素的方法： 　　收集利用Jquery取得iframe中元素的几种方法: 　　Js代码 　　$(document.getElementById('iframeId').contentWin
Iframe 自动适应页面的高度示例代码
09-04
主要介绍了Iframe如何自动适应页面的高度,需要的朋友可以参考下
iframe自适应子页面内容高度
08-13
NULL 博文链接：https://gaochunhu.iteye.com/blog/2310699
iframe根据页面内容自适应高度和宽度
09-03
iframe根据引用的页面内容自适应高度和宽度，直接查看例子，简单易操作
js动态改变iframe的高度
weixin_30415801的博客
05-04 159
在数飞OA的开发过程中，遇到问题：一个jsp页面嵌套一个html页面。 〈iframe id="docDetail" width="100%" height="200" frameborder="0" src="a.htm"〉 〈/iframe〉 而a.html不是固定大小的，这个时候嵌套的iframe就会出现滚动条。 通过js获取iframe的高度...
html框架怎么调用高度,HTML<iframe>标签怎么使用？HTML<iframe>标签自适应高度的4种简单方法...
weixin_31904867的博客
06-09 303
HTML标签怎么使用？HTML标签自适应高度的4种简单方法你知道吗？本篇文章为大家详细的介绍了HTML标签怎么使用和四种HTML标签自适应高度简单的方法。HTML 标签是什么： 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。HTML 标签怎么使用： 标签会创建包含另外一个文档的内联框架，有效地将另一个 HTML 页面嵌入到当前页中。请参考以下的实例：标记一个内...
前端面试题知识点（一）
weixin_42459695的博客
10-17 328
前端知识点（一） 前端开发的知识点： HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、HTML5、CSS3、Flexbox javaScipt: 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他: 移动端、响应式、自动化构建、HTTP、
iframe嵌套的html高度,iframe 多层嵌套 无限嵌套 高度自适应的解决方案
weixin_31969181的博客
06-29 183
有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应A页面复制代码代码如下:onload="this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}...
iframe父子页面间互相调用方法和属性
weixin_34417183的博客
02-25 236
<iframe src="VideoController.do?videoPlay" name="topFrame" ></iframe> topFrame 是父级页面iframe的name属性 1、父级页面调用子级页面 （1）父级页面调用子级页面方法 　　topFrame.window.子级页面方法(); （2）父级页面调用子级页面属性 ...
node-v4.8.6-win-x64.zip
最新发布
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
iframe 获取子页面内容高度
05-20
可以通过以下代码获取子页面的内容高度： ```javascript var iframe = document.getElementById('myIFrame'); var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; var height = iframeDocument.documentElement.scrollHeight; ``` 其中，`myIFrame` 是子页面的 `id`。`contentDocument` 和 `contentWindow.document` 都可以获取到子页面的文档对象，不同浏览器支持的方式不同，因此需要使用 `||` 进行兼容处理。`scrollHeight` 属性可以获取文档的完整高度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值