页面代码
<!--编辑表单开始--> <div region="center" bodyCls="box" id="bddiv"> <iframe id="ckframe" name="ckframe" frameborder="no" style="border:none" scrolling=no width="100%" height="9999px;"></iframe> <div id="spform"> <input class="mini-hidden" type="hidden" name="fxxx_bh" id="fxxx_bh" value="[%HTML::TEXT.FXXX_BH%]" /> <input class="mini-hidden" type="hidden" name="openTabId" id="openTabId" value="[%HTML::TEXT.openTabId%]" /> <table width="100%" border=0 cellPadding=0 cellSpacing=0 class="edit"> <tbody> <tr> <th width="20%">审批意见:</th> <td width="80%" id="sjyjTd"> </td> </tr> <tr> <th width="20%">审批说明:</th> <td width="80%"> <textarea name="sjyjsmTd" id="sjyjsmTd" class="mini-textarea noborder-textarea" style="height: 90px" allowinput="false"></textarea> </td> </tr> </tbody> </table> </div> </div>
一开始要把iframe高度设置成9999px寓意是无限高
然后延迟读取iframe内部页面高度并设置成父页面的iframe高度
setTimeout(function(){ $("#ckframe").height($("#ckframe").contents().find("#ksfkForm").height()); },500);
相关推荐
本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度: 复制代码 代码如下:var iframe...
3. **动态调整**:将计算出的高度应用于`iframe`的样式,设置其`height`属性,从而实现自适应。 4. **重试机制**:考虑到某些情况下内容可能延迟加载,插件可能包含一个重试机制,确保在一段时间内持续检查并适应...
用jQuery实现iframe高度自适应 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $(document).ready(function() { function resizeIframe() { var iframe = $('#myIframe'); if ...
jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件,当iframe内容加载完成后,获取其实际内容高度并设置为iframe的height属性。这种方法可以确保iframe始终能完全显示其内部内容,避免滚动条的...
之后,将此高度加上额外的40像素(为了留出一定的空间),设置为iframe的新高度,从而实现了iframe的自适应高度调整。 ### 5. 兼容性考虑 实现iframe自适应高度时,必须考虑到不同浏览器之间的差异,包括但不限于...
为了解决这个问题,我们需要一种方法来动态地调整`iframe`的高度,使其与内容匹配。这种技术通常涉及到JavaScript,通过监听`iframe`的`load`事件,然后获取`iframe`内的文档高度,并设置到`iframe`的`height`属性上...
这种技术常被用来实现...以上就是关于“Iframe高度自适应浏览器高度”的主要知识点,实践中可能需要结合具体场景和需求选择合适的方法。在实际应用中,还要考虑到兼容性问题,确保在不同浏览器和设备上都能正常工作。
二、动态获取iframe高度 2. **事件监听** 由于iframe内容可能异步加载,因此我们需要监听`load`事件来确保在内容完全加载后获取高度。当iframe加载完成后,可以通过以下方式获取高度: ```javascript var ...
标题"iframe高度随子页高度变化"和描述中提到的问题,正是关注于这个动态调整`iframe`高度的技术。 要实现`iframe`高度随子页高度变化,主要涉及以下几个关键点: 1. **设置iframe的初始高度**:首先,我们需要为`...
`iframe-resizer`库提供了一种解决方案,它允许父页面和子页面之间进行通信,动态调整`iframe`的高度。使用方法如下: - 首先,将`iframe-resizer.js`引入父页面和`iframe`内的子页面。 - 在`iframe`的HTML中添加...
2. `reSetIframeHeight`函数:这个函数用于在iframe高度需要重新计算时调用。它尝试通过iframe的name或id属性找到iframe元素,并设置一个初始高度值,然后调用`iframeLoaded`函数。这个函数设计为可以在分页或Ajax...
使用jQuery和ajax代替iframe的主要方法在于:通过JavaScript动态地获取外部HTML内容,并将其插入到当前页面的指定容器中。这种做法可以保持页面的整体一致性,同时避免iframe带来的问题。 具体操作步骤如下: 1. ...
3. **设置iframe高度**:获取到准确的高度后,插件会动态更新iframe的`height`属性,使其适应内容高度,消除滚动条。 4. **实时更新**:如果iframe内的内容在用户交互过程中发生变化,插件会持续监控并适时更新...
总结一下,jQuery提供了方便的API来处理`iframe`的`onload`事件,使得我们可以在`iframe`加载完成后执行各种操作。在编写代码时,考虑到浏览器的兼容性问题,我们可以根据需要选择合适的事件绑定方式。通过这种方式...
3. **动态更新**:如果`iframe`内的内容是动态更新的,需要在内容更新后再次调用高度设置的代码,以保持高度的自适应。 4. **浏览器兼容性**:虽然jQuery通常具有较好的浏览器兼容性,但在一些老版本的浏览器中可能...
- 避免使用绝对值设置iframe高度,而是倾向于动态计算或响应式设计。 - 对于跨域问题,使用`postMessage`可以提高兼容性和安全性。 - 考虑到性能,尽量在iframe内容加载完成后才执行调整高度的操作,以减少不必要...
当`iframe`加载的页面高度不确定时,我们需要动态调整`iframe`的高度以适应内容。由于跨域限制,我们不能直接获取子页面的DOM信息,但可以通过以下策略实现: - **使用代理页面** 创建一个与父页面同源的代理...
在本例中,通过获取iframe内容的scrollHeight属性,可以获取到内容的实际高度,然后用这个高度来设置iframe的高度,实现高度自适应。 知识点六:跨浏览器兼容性 在实际开发中,需要考虑不同浏览器的兼容性问题。在...
// 调整iframe高度 }); ``` `iframe`内部示例代码: ```javascript window.onload = function() { var height = document.documentElement.scrollHeight || document.body.scrollHeight; parent.post...