父页面iframe自适应子页面高度

最新推荐文章于 2018-04-03 20:04:29 发布
最新推荐文章于 2018-04-03 20:04:29 发布
阅读量3.9k 收藏 1
点赞数
文章标签： iframe action function jsp table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingwangyoucao/article/details/5664126
版权

父页面有table，有tr，td。td中有iframe。页面加载时未设定iframe的src，tr的style设置为none。

<tr id="tr_clueReportENIframe" style="display:none">
      <td colspan="2">
              <iframe id="clueReportENIframe" name="clueReportENIframe"  frameborder="0" scrolling="no"></iframe>
      </td>
 </tr>

通过某事件，需要tr显示。iframe有内容

 if(document.getElementById("tr_clueReportENIframe").style.display=="none"){
          document.getElementById("tr_clueReportENIframe").style.display="";
          document.getElementById("clueReportENIframe").src="<%=basePath%>displayClueReport.do?clueReportRecordId="+ clueReportRecordId +"&language=EN";
  }
else if(document.getElementById("tr_clueReportENIframe").style.display==""){
           document.getElementById("tr_clueReportENIframe").style.display="none";
}

iframe的src指向action。action跳转到子页面a.jsp页面，jsp页面内容不确定，高度不确定。父页面的clueReportENIframe无法设定高度。

这时，可以在子页面添加如下代码：

<script type="text/javascript">
   function load(){
     parent.document.getElementById("clueReportENIframe").style.height = document.body.scrollHeight +"px";
     parent.document.getElementById("clueReportENIframe").style.width = document.body.scrollWidth +"px";
   }
</script>

<body onLoad="load();">

可以根据子页面高度和宽度，自动设置父页面的iframe高度。

 

 

qingwangyoucao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe父页面自适应子页面的高度
hzau_itdog的博客
12-06 390
我们一般情况下是在子页面获取高度传递给父页面，但是由于存在跨域问题，解决起来不是很方便而 html5 postMessage解决跨域、跨窗口消息传递 postMessage() 这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息...
父子页面通过postMessage通信实现iframe高度自适应
Flowering_Vivian的博客
09-22 581
最近项目中的需求是实现iframe高度的自适应，因为iframe表单中的内容多少不固定，所以高度也是不固定的，网上百度了好多方法，发现都没用。 偶然间发现父页面和iframe子页面之间可以通过postMessage通信，这样的话，就可以在子页面获取表单的整体高度height值，然后通过通信的方式传递给父页面，父页面拿到height值，再赋值给iframe。 这样我的问题就得到了完美解决，话不多说，上代码。 1.iframe子页面 //在页面初始化之后执行该方法，mainForm是表单父元素的id funct
EXT组件自适应高度和宽度
泉水依然
01-16 1919
  Ext的组件构造函数的width、height不支持100%的设置方式，因此动态获取高度宽度来解决问题。 &lt;div id="component" style="width:100%;height:100%"&gt; &lt;div&gt; 组件构造的时候这样写： width: Ext.get("component").getWidth(), height: Ext.get("compo...
父页面iframe高度自动适应子页面iframe高度
menghuannvxia的专栏
04-02 1390
//iframe自适应高度 function getHeight(id, name) { document.documentElement.scrollTop = 0; var ifm = document.getElementById(id); var subWeb = document.frames ? document.frames[name].document : ifm
iframe自适应子页面内容高度
08-13
2. JavaScript处理：通过`contentWindow`和`contentWindow.document`获取子页面高度，或使用`postMessage`和`message`事件进行跨域通信。 3. 动态调整：在父页面中监听事件，接收到高度信息后更新`iframe`的高度。 ...
javascript 装载iframe子页面，自适应高度
10-30
javascript 装载iframe子页面，自适应高度
iframe根据页面内容自适应高度和宽度
09-03
`iframe-resizer`库提供了一种解决方案，它允许父页面和子页面之间进行通信，动态调整`iframe`的高度。使用方法如下： - 首先，将`iframe-resizer.js`引入父页面和`iframe`内的子页面。 - 在`iframe`的HTML中添加...
jsp页面iframe高度自适应的js代码
10-25
本文将详细探讨如何通过JavaScript实现JSP页面中IFrame的高度自适应。 首先，我们来看一下提供的代码片段。在这个例子中，有一个名为`agentFrame`的IFrame，其初始宽度和高度都设置为0，并且设置为隐藏（`display:...
iframe父页面随子页面高度的增加而增加
xyr05288的专栏
06-08 4615
问题：iframe嵌套网页，子页面高度增加，iframe高度也会增加.列如：子页面是一个表格数据。有个下拉框可以选择 回答： 1、首先你要明确：选择条数之后，触发了事件令子页面的body高度改变了，因此我们要捕捉到这个事件，即：$("body").resize(function(){}); 2、捕捉到事件后，我们要利用window.parent改变父页面的容器的高度。如：在父页面写个方法
contentDocument实现iframe自适应子页面高度
MyFirstBook527的博客
10-08 3000
刚开通博客不久，经常在看到前辈和大牛在博客上分享技术经验，就想用博客来记录一些遇到过的问题和解决问题的经验。      前两天一朋友和我讨论到用iframe内嵌网页如何做到让iframe自适应子页面的高度。我之前也遇到过同样的问题，如果iframe在不设置高度的情况下，默认高度为150px（在谷歌浏览器下亲试，其他浏览器未实验），如果iframe通过js引用其他子页面进来也无法像div那样通过内
子窗口操作父窗口自适应高度<iframe></iframe>
wang845252276的专栏
11-18 3409
这不是跨域,且我不喜欢用定时器判断,父窗口load事件已适应子窗口高度,但如果后续操作会改变高度将不会适应新高度,且父窗口的click,mouse事件只有边框能触发,不用定时器去随时判断,那就只有从子窗口着手.$(function(){ var parentHeight = 0;//父窗口iframe高度 var parentFrame = null;//父窗口iframe
ExtJs子页面操作父页面
风秦月舞的博客
01-19 2053
ExtJs子页面操作父页面。
iframe 自适应高度（在父页面和在子页面调用的两个方法）
HY_358116732的博客
01-10 403
方法一： 在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight);});方法二：在iframe引用的子页面中调用$(window.parent.docume
iframe父子页面相互调用及子页面自适应
death05的博客
04-03 882
页面中，当我们想用到局部页面刷新，可能就会用到iframe（博主是因为需要局部刷新分页）。因此，谈谈自己的一些经验。
励志2024龙年筑梦前行共创未来PPT模板，适用于工作计划，工作总结
07-15
【作品名称】：励志2024龙年筑梦前行共创未来PPT模板，适用于工作计划，工作总结 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
内蒙古医科大学考研17个学院，57个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
07-15
内蒙古医科大学考研17个学院，57个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
最新发布
07-15
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
长三角城市及各区县数据集.txt
07-15
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章：https://blog.csdn.net/m0_65541699/article/details/140428710
iframe高度自适应页面
09-08
要实现iframe的高度自适应页面，可以采用以下方法。首先，在包含iframe的页面中加入以下脚本。该脚本的基本思想是在iframe加载内容后重新设置高度。在这个过程中，我们可以使用doc.body.scrollHeight和doc....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值