Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jquery 实现iframe 自适应高度

jquery 实现iframe 自适应高度

作者头像
李维亮
发布于 2021-07-09 07:27:41
发布于 2021-07-09 07:27:41
2.6K00
代码可运行
举报
文章被收录于专栏:李维亮的博客李维亮的博客
运行总次数:0
代码可运行

超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。 注意别放错地方了哦。

iframe代码,注意要写ID

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<iframe id="main" src="test.html" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码1:

//注意:下面的代码是放在test.html调用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});

jquery代码2:

//注意:下面的代码是放在和iframe同一个页面调用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-10-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iframe 自适应高度的多种实现方式
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
全栈程序员站长
2022/09/06
7.8K0
解决iframe高度自适应
iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题。
全栈程序员站长
2022/11/17
2.5K0
iframe自适应高度_iframe根据内容自适应高度
首先需要给iframe设置一个id,不需要滚动条则加上scrolling=”no”
全栈程序员站长
2022/11/08
5.2K0
iframe高度自适应的IE解决方案
主页面main.html  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>New Document </title> </head> <body> <style type="text/css">         .iframestyle {             
菩提树下的杨过
2018/01/22
9350
vue项目iframe的传值问题
  所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。
Dawnzhang
2019/11/21
1.8K0
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/08/21
6.9K0
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
让动态的 iframe 内容高度自适应
注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2,两种引用方式是等价的
书童小二
2018/09/03
6.9K0
让动态的 iframe 内容高度自适应
iframe自适应高度 原
同时总结下经常用的高度           contentWindow   兼容各个浏览器,可取得子窗口的 window 对象。             contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。             document.body.clientWidth  可见区域内容的宽度(不包含边框,如果水平有滚动条,不显示全部内容的宽度)           document.body.clientHeight 全部内容的高度(如果垂直有滚动条,也显示全部内容的高度)           document.body.offsetWidth  可见区域内容的宽度(含边框,如果水平有滚动条,不显示全部内容的宽度)           document.body.offsetHeight 全部内容的高度(如果垂直有滚动条,也显示全部内容的高度)           document.body.scrollWidth  内容的宽度(含边框,如果有滚动则是包含整个页面的内容的宽度,即拖动滚动条后看到的所有内容)           document.body.scrollHeight 全部内容的高度
tianyawhl
2019/04/04
2.3K0
Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!
jquery取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下: $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) $(document.getElementById('iframeId').contentWindow.document.body).html()  显示iframe中body
磊哥
2018/05/08
8.9K0
js获取iframe中的内容(iframe内嵌页面)
在父页面中定义函数,再到子页面中调用。 父页面parent.html function getFrameId(f){ var frames = document.getElementsByTagName(“iframe”); //获取父页面所有iframe for(i=0;i
全栈程序员站长
2022/08/01
25K0
js获取iframe中的内容(iframe内嵌页面)
html中引入调用另一个公用html模板文件的方法
查了一下资料,发现html中引入调用另一个html的方法有很多种,我都尝试了一下,就把他们都列出来吧: 其中推荐第一种和第六种,因为代码太长就写在最后了。其他的方法,可以自己尝试,看是不是适合你当前项目。
德顺
2019/11/13
8.7K0
html中引入调用另一个公用html模板文件的方法
iframe自适应高度和宽度_自适应框架
var ifm_content = document.getElementById(“conFrame”);
全栈程序员站长
2022/11/19
3K0
easyui内嵌iframe问题解决
摘要总结:本篇文章主要介绍了在EasyUI中如何通过内嵌iframe实现tab页跳转以及如何在iframe子页面中调用父页面的方法。同时还提到了在tab页中如何实现新增同级tab页并刷新tab页。
用户1141560
2017/12/26
2.6K0
真正解决iframe高度自适应问题
拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。
yuezhongbao
2019/02/26
5.5K0
获得同级iframe页面的指定ID元素的几种实现方法
注:window.frames("iframe的name")、document.frames("iframe的name")和window.frames["iframe的name"]、document.frames[""iframe的name"]的区别
阿豪聊干货
2018/08/09
2K0
layui表格自适应高度_css布局左侧固定右侧自适应
var layui_title_height=$(window.parent.document).find(“.layui-layer-title”).height();
全栈程序员站长
2022/11/17
4.2K0
iframe框根据内容自适应高度(100%可用)
iframe框根据内容自适应高度(100%可用) HTML:  <iframe id="iframe" src="自己写地址" name="content" frameborder="0" style="width: 100%;height: 100vh;"></iframe> script:  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script typ
红目香薰
2022/11/29
2K0
JavaScript 处理Iframe自适应高度的问题
 用到的就是iframe嵌套的页面加载完毕的时候,运用onload事件来获取嵌套在iframe中网页的高度,然后赋值给Iframe的高度即可。
aehyok
2018/09/11
1.7K0
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
当我们使用多标签iframe的后台管理模板时,需要在一个iframe中跳转到另一个iframe,并且对新iframe进行操作,这篇文章记录一下我在开发过程中编写的代码。
宣言言言
2019/12/19
2.3K0
多Iframe版后台,在一个iframe切换到另一个iframe,同时刷新
iframe的高度自适应_div自适应高度
大家好,又见面了,我是你们的朋友全栈君。 Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html
全栈程序员站长
2022/11/04
7.3K0
推荐阅读
相关推荐
iframe 自适应高度的多种实现方式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验