iframe根据内容自适应高度，解决高度自适应和跳转页面高度被影响问题

最新推荐文章于 2022-11-22 14:34:50 发布
最新推荐文章于 2022-11-22 14:34:50 发布
阅读量336 收藏 1
点赞数
分类专栏： iframe 文章标签： js javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43998435/article/details/114367506
版权

iframe根据内容自适应高度，解决高度自适应和跳转页面高度被影响问题

相关代码

<body>
 <iframe src="" id="iframeWorkPanel" name="iframeWorkPanel" width="100%"  scrolling="no" frameborder="0" wmode="window" onload="reinitIframe(0)"></iframe>
</body>
<script>
  window.onresize = function () {
    reinitIframe(0); // 页面改变时调用
  }
  // iframe页面自适应
  function reinitIframe(val) {
    var iframe = document.getElementById("iframeWorkPanel");
    if (val == 0) { // 当页面跳转时使iframe高度变0,去除之前高度对跳转页面的影响
      iframe.height = 0;
    }
    try {
      var bHeight = iframe.contentWindow.document.body.scrollHeight;
      var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
      var height = Math.max(bHeight, dHeight);
      iframe.height = height;
    } catch (ex) {
    }
  }
  window.setInterval("reinitIframe()", 350); // 定时触发,监控页面高度的改变
</script>
小小的愿望大大的心
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
iframe根据页面内容自适应高度和宽度
09-03
iframe根据引用的页面内容自适应高度和宽度，直接查看例子，简单易操作
6种iframe高度自适应的方法
web前端开发
03-12 3万+
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...
Iframe高度随内容自动调节
shaily读书学习
09-02 2170
以下两种方法会让网页中的iframe高度自动适应嵌入页的内容高度。方式一：在被嵌入页里写入代码假设main.htm文件内容：    则在iframe.htm文件中加入如下代码：            function window.onload() {         if(top.location != self.location){             var a = window.par
iframe实现高度由内部内容决定
qq_30095631的博客
07-18 1027
    通常的div块，在不设置高度情况下，父元素的大小，由内部元素大小决定，这样设置比较灵活，当div内部为float浮动元素时，父div需要添加overflow:hidden这个css属性才能实现父div高度由内部大小决定。但是当我们使用iframe时却不能通过上面的两种方式实现iframe的大小由内部大小来决定。所以这里找了一个比较可靠地方式，如下： var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera
Vue3 iframe引用本地文件以及根据内容调整iframe高度
qq_37656005的博客
03-14 4754
Vue3 iframe引用本地文件以及根据内容调整iframe高度 首先在public文件夹下新建文件夹static,将需要引入的html页面放入进去 template写引入iframe <iframe src="static/word/index.html" id="testFrame" name="myiframe" frameborder="0" width="100%" scrolling="no" style="min-height: 500px;" ></iframe
html静态页面模版
01-03
静态页面意味着页面内容在服务器端生成后不再改变，直到服务器被更新。这种类型的页面通常用于简单的网站，如个人信息展示或小型项目介绍。 layui是一个轻量级的前端UI框架，它提供了一整套美观的组件，包括表格、...
ace admin iframe版本（1.4）
10-19
在Ace Admin 1.4中，通过使用iframe，不同的功能模块可以被封装在独立的页面中，通过主页面的iframe进行加载，实现了页面间的无刷新跳转，减少了网络请求，提高了加载速度。 3. **Java后端支持**：虽然Ace Admin...
页面布局frameset frame
12-20
在网页设计领域，页面布局是至关重要的，它决定了用户如何与网站进行交互和获取信息。在HTML的历史发展中，"frameset" 和 "frame" 是早期用于实现多窗口或区域页面布局的技术。这些技术允许开发者将网页分割成多个...
非常好的js代码
12-03
8. **iframe自适应高度（跨域）**：对于跨域的iframe，需要考虑权限问题，确保源地址和父页面在同一域下，或者了解如何处理跨域策略。 9. **跳转菜单**：通过 `<select>` 元素的 `onchange` 事件，可以实现选择项...
jQuery滚动插件
01-03
同时，我们还可以利用jQuery实现IFrame的高度自适应，确保内容完全显示： ```javascript function resizeIframe(iframe) { iframe.height(iframe.contents().find('body').outerHeight()); } resizeIframe($('...
Iframe实现跨浏览器自适应高度解决方法
12-09
本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法，非常具有实用价值。分享给大家供大家参考之用。具体方法如下： 该方法使用了jQuery，因此需要在iframe的src页面里面引入jQuery。 父页面里面相对简单一点，主要包含以下代码： <iframe id="if1" scrolling="no" src="2.html"></iframe> 在iframe的src页面里面代码如下： [removed] function resizeContent() { $(window.parent.document).find("
控制iframe的高度随内容的多而自动增长
weixin_30642029的博客
10-08 215
<script language="javascript">if (window.parent.length>0){window.parent.document.all.newtest.style.height=document.body.scrollHeight;}</script> 只需在你被iframe调用的文件</body>之后加入上面...
解决iframe下页面锚点链接跳转当前页面组件后页面父布局错乱问题
hexianfan的博客
11-22 271
解决iframe下页面锚点链接跳转当前页面组件后页面父布局错乱问题
Iframe实现自适应调用内容页的大小
J_JAKE（陆冷飞）的专栏
08-25 1179
在网站的页面布局中我们经常要用到IFRAME，而且有事需要IFARME能够自适应内容的大小，免得出现滚动条，太难看。下面是我从网上搜集来的代码，直接用上了，觉得挺好用的，帖出来共享被嵌页面：Inc_Left_Tech.aspx的头部代码...@ Page Language="C#" AutoEventWireup="true" CodeFile="Inc_Left_Tech.asp
iframe实现全屏，高度自适应浏览器实现
Java小皮孩
12-15 2万+
iframe <iframe id="iframe" name="iframe" height="100%" width="100%" src="https://www.baidu.com" scrolling="auto" frameborder="0" onload="changeFrameHeight()"> </iframe> iframe的参数 ifra
监听Dom节点变化 - Mutation Observer
weixin_33853827的博客
01-31 588
HTML5新特性之Mutation Observer Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发...
关于iframe跨页面设置高度
weixin_30348519的博客
02-06 67
注意：这两种方式不支持跨域使用 1.jQuery简单实现iframe的高度根据页面内容自适应的方法（加载后展示使用） 方式1： //注意：下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30...
iframe 根据内容自适应高度-终极解决方案
热门推荐
不啦草的草原
07-05 6万+
第一中方法： 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.getElementById("iframe").height=document.body.scrollHeight; 第二中方法： 在主页面 iframe onLoad 时间里面写 functi
iframe切换后高度不一致问题解决
hql1439493352的博客
05-30 806
问题描述：在导航栏有多个tab切换，下边的主体内容是用iframe加载的子页面； 点击tab会更换iframe路径显示不同内容，在切换时原本的iframe高度会被另一个iframe高度影响； 解决办法：每次在给父页面iframe计算高度并赋值之前先初始化它的height为0； function setParentIframeHeight(id){ try{ var parentIframe = parent.document.getElementById(id);
iframe标签外盒子高度不能根据里面的iframe内容自适应高度。
最新发布
07-28
综上所述，你可以根据以上的方法来实现iframe标签外盒子高度根据里面的iframe内容自适应高度。 #### 引用[.reference_title] - *1* [动态修改iframe高度，从而自适应内容真实高度]...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值