分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

js兼容的Iframe自适应高度

发布时间:2023-09-06 01:39责任编辑:沈小雨关键词:js自适应

js解决Iframe套用页面,自适应高度的问题。

两个页面,a.html和b.html

a.html 

<div style="border: 1px solid;"> ???<iframe id="iframeId" src="b.html" frameborder="0"></iframe></div>
<script type="text/javascript"> ????function setIframeHeight(id){ ????????try{ ?????????????var iframe = document.getElementById("#iframeId"); ?????????????if(iframe.attachEvent){ ?????????????????iframe.attachEvent("onload", function(){ ?????????????????iframe.height = ?iframe.contentWindow.document.documentElement.scrollHeight;//定义变量获取iframe内嵌框架整体的总高度 ?????????????}); ?????????????return; ?????????????}else{ ?????????????????iframe.onload = function(){ ?????????????????iframe.height = iframe.contentDocument.body.scrollHeight;//定义变量获取iframe内嵌框架里面的body节点的总高度
}; return; } }catch(e){ throw new Error(‘setIframeHeight Error‘); } } </script>

b.html

<style type="text/css">.ss{ ???height: 700px; ???background: #0000FF; ???color: #fff; ???font-size: 36px; ???position: relative;}</style><body>   <div class="ss"> ???  aaa ???  <span style="position: absolute;bottom: 0px;">jdjdjjdj</span>  </div></body>

效果图

js兼容的Iframe自适应高度

原文地址:https://www.cnblogs.com/alizhi/p/8359342.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved