摘要:自适应高度,其实就是设置的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理,通过它获取页面的高度,并设定元素的高度。
iframe内容未知,高度可预测JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。
如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。
这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度。常用的兼容代码有:
// document.domain = "caibaojian.com"; function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } }; window.onload = function () { setIframeHeight(document.getElementById("external-frame")); };多个iframe的情况下 针对知道的iframe的ID调用
function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight); }, 200) }内容宽度变化的iframe高度自适应
跨域下的iframe自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。
a.html中包含iframe:
在c.html中加入如下代码:
最后,agent.html中放入一段js:
agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/88974.html
摘要:自适应高度,其实就是设置的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理,通过它获取页面的高度,并设定元素的高度。 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同...
摘要:自适应高度,其实就是设置的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理,通过它获取页面的高度,并设定元素的高度。 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同...
摘要:欢迎指出问题或留言加深本文的深度,例如已经不需要声明,但是我解决这个问题不得不改一下,退化到,为什么在中子页面和的高度不是由内部的内容决定的,而是等于父元素的高度 1.前言 解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求: iframe的高度始...
摘要:欢迎指出问题或留言加深本文的深度,例如已经不需要声明,但是我解决这个问题不得不改一下,退化到,为什么在中子页面和的高度不是由内部的内容决定的,而是等于父元素的高度 1.前言 解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求: iframe的高度始...
阅读 2971·2021-10-27 14:15
阅读 2939·2021-09-07 10:18
阅读 1287·2019-08-30 15:53
阅读 1538·2019-08-26 18:18
阅读 3343·2019-08-26 12:15
阅读 3408·2019-08-26 10:43
阅读 593·2019-08-23 16:43
阅读 2161·2019-08-23 15:27