iframe高度自适应
在前端开发过程中用到了iframe控件。将其他页面嵌套如父页面中。当子页面高度不固定时,iframe的高度无法实现自适应。
解决方案:
父页面:
<iframe id="parentIframe"
src="hello.html"
frameborder="0" width="100%" height="100%"></iframe>
在子页面定义setParentIframeHeight()方法并调用。
function setParentIframeHeight() {
try {
var parentIframe = parent.document.getElementById("parentIframe");
if (window.attachEvent) {
window.attachEvent("onload", function () {
parentIframe.height = document.documentElement.scrollHeight + 40 + "px";
});
return;
} else {
window.onload = function () {
parentIframe.height = document.body.scrollHeight + 40 + "px";
};
return;
}
} catch (e) {
throw new Error('setParentIframeHeight Error');
}
}
父页面调用子页面方法:
$("#parentIframe")[0].contentWindow.getTest();
版权声明:本文为博客园博主「Spear_J」的原创文章,编写不易,转载请附上原文出处链接及本声明。
https://www.cnblogs.com/lmh15054109/p/15936302.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix