首页
学习
活动
专区
圈层
工具
发布

jquery 实现iframe 自适应高度

超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。 注意别放错地方了哦。...iframe代码,注意要写ID iframe id="main" src="test.html" width="700" height="300" frameborder="0" scrolling=..."auto">iframe> jquery代码1: //注意:下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(function...window.parent.document).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); }); jquery...代码2: //注意:下面的代码是放在和iframe同一个页面调用 $("#main").load(function(){ var mainheight = $(this).contents().find

2.9K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js...需求场景1 实现需求:如下图,点击左侧的导航,打开对应tab页面,其中tab页面的内容为 iframe,这里希望iframe的高度和宽度,根据浏览器窗口大小变化而变化,同时页面内容过多,或者过宽时,出现...> JS代码片段1(批量更改所有tab页的iframe高度) /** * 设置tab标签对应的iframe页面高度 */ function changeFrameHeight(){ var.../** * 浏览器窗口大小发生变化时,自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight() */ $(...当调整浏览器窗口的大小时,发生 resize 事件。

    7.4K20

    TypeScript 在 Nuxt.js 的入门实现与一些奇妙的新知识

    这段时间在积极备考呢,英国考试局把毕业前最后一次全球统考取消了,改为学校评估成绩并采用专业科学严谨的数据模型分析学校提交成绩的可信度做出调整并公布最终成绩,学校无法胡作非为。...之前是因为 Artalk 与其他 js 兼容的问题所以使用了 iframe 方式嵌入评论区,但是由于加载博客页面时需要一段时间等待 iframe 网页端获取评论数据以展示,就会出现加载完成后高度无法被博客页面获取的问题...小小的百度了一下,发现父页面其实可以通过 iframe 元素的 contentWindow 属性来获取到子页面的 document,这样一来就可以获取到子页面文档高度了。...需要注意的是跨域问题,解决办法是强制设定父子页面域名一致,代码如下: // 与 iframe 通信获取评论列表高度函数 function getCommentsHeight():void { //...逻辑是在快要滑动至底部评论区时请求获取子页面高度并调整父页面评论区高度和大小。

    3K10

    js获取iframe中的内容(iframe内嵌页面)

    js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他的iframe的id 在父页面中定义函数,再到子页面中调用。...iframe for(i=0;i js怎样获取iframe,src中的参数 如何获取iframe里的src里面的属性 js如何修改iframe 中元素的属性 iframe 属性 及用法越详细越好 。。...在线等 iframe元素的功能是在一个html内嵌一个文档,创建一个浮动的郑iframe可以嵌在网页中的任意部分 name:内嵌帧名称 width:内嵌帧宽度(可用像素值或百分比) height:内嵌帧高度...(可用像素值或百分比) frameborder:内嵌帧边框 marginwidth:帧内文 jQuery怎么给iframe的src赋值 给iframe src赋值,代码如下: 特别注意: 1.上述jquery...代码不能缺少 $(document).ready(); ,否则iframe src赋值失败。

    26.8K50

    WordPress 5.7 发布,更好用的古腾堡编辑器

    ​WordPress 5.7 发布,新版本改善了古腾堡编辑器的编辑体验,并使用户能够轻松创建更多高级块,并为块编辑器添加更强大的自定义项,还有 HTTPS 切换等其他功能改进​。...古腾堡编辑器更易使用 增强字体调整:编辑器很多的地方都可以调整字体,比如列表,代码等块,并且无需切换界面。 增强可重用块,更加稳定,更好用,并且支持自动保存。...延迟加载 iFrame iframes 也可以延迟加载了,WordPress 默认会给设置了高和宽的的 iframe 加上 loading="lazy" 的属性。...jQuery 升级到 3.5.1 WordPress 还是会一直支持 jQuery,因为太多的插件和主题是基于 jQuery 做的交互,WordPress 将 jQuery 升级到最新版,并移除 jQuery...migrate,并且为了减少对开发者的打扰,WordPress 会在在 console 输出更少 jQuery 相关的信息。

    88120

    组件分享之前端组件——文件上传小部件jQuery-File-Upload

    支持跨域、分块和可恢复的文件上传和客户端图像大小调整。...客户端图像调整大小: 图像可以自动调整客户端浏览器支持所需的JS api。 图片、音频、视频预览: 支持支持api的浏览器,支持在上传前预览图片、音频、视频文件。...传统浏览器的优雅回退: 通过xmlhttprequest上传文件(如果支持),并使用iframes作为回退。...跨站点文件上传: 支持跨站点xmlhttprequest或iframe重定向上传文件到不同的域。 多个插件实例: 允许在同一个网页上使用多个插件实例。...jQuery Iframe Transport 插件 (包含): 不支持 XHR 文件上传的浏览器需要。 可选要求 JavaScript 模板引擎 v3+:用于渲染选定和上传的文件。

    4K20

    WordPress 教程:在 WordPress 后台使用 ThickBox 制作弹出窗

    WordPress 的 ThickBox jQuery 库 WordPress 后台自带的 ThickBox 库是经过 WordPress 修改的,比如目前插件更新提示的详情链接就是使用 ThickBox...WordPress 后台自带的 ThickBox jQuery 库有两种使用方式: iframe 模式:在弹出层中加载另外一个网页。...inline 模式:在弹出层中加载 HTML 片段 下面分别详细讲讲这两种模式的详细使用方法: iframe 模式 iframe=true&width=420&height=480">点击查看更多 其中: 无论是 iframe 模式还是 inline...a 标签的 href 属性即为 iframe 要加载的页面,TB_iframe 参数指定的是 ThickBox 的 iframe 模式,width 参数指定了弹出层的宽度,height 参数指定了弹出层的高度

    1.1K50

    JS异步加载的三种方式

    元素,然后再iframe中执行加载JS的操作。...(iframe); var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。...没有async属性,script将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。如果有async属性,那么script将被异步下载并执行,同时浏览器继续后续的处理。...原理基本上都是向DOM中写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数中执行,也可以在onload中执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe...可以通过一个定时器来实现,通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

    3.8K20

    12个用得着的JQuery代码片段

    ,function(index,ele){ .... ... }); 3.访问IFrame里的元素 在大多数情况下,IFrame并不是好的解决方案,但由于各种原因,项目中确实用到了IFrame...,所以你需要知道怎么去访问IFrame里的元素 var iFrameDOM = $("iframe#someID").contents(); //然后,就可以通过find方法来遍历获取iFrame中的元素了...'); 7.采配置JQuery与其它库的兼容性 如果在项目中使用JQuery,$ 是最常用的变量名,但JQuery并不是唯一一个使用$作为变量名的库,为了避免命名冲突,你可以按照下面方式来组织你的代码:...//方法一: 为JQuery重新命名为 $j var $j = jQuery.noConflict(); $j('#id').......根据视窗(viewport)创建一个全屏宽度和高度(width/height)的div 下面代码完全可以让你根据viewport创建一个全屏的div。

    1.3K50
    领券