iframe自适应,iframe自适应高度和宽度

将乐信息网 http://www.jianglexinxi.cn 2020-07-01 08:58 出处:网络
iframe自适应,iframe自适应高度和宽度,让动态的 iframe 内容高度自适应 div iframe name=\"iframe1\" src=\"iframe1.html\" frameborder=\"0\" width=\"100%\" /iframe

iframe自适应,iframe自适应高度和宽度,让动态的 iframe 内容高度自适应

 div 
 iframe name="iframe1" src="iframe1.html" frameborder="0" width="100%" /iframe 
 iframe name="iframe2" src="iframe2.html" frameborder="0" width="100%" /iframe 
 /div 

默认长这样

iframe自适应,iframe自适应高度和宽度

有滚动条,可以看到iframe并不会因为内容高度自动撑开

 

2. 显示地设置高度
 div 
 iframe name="iframe1" src="iframe1.html" frameborder="0" width="100%" height="300px" /iframe 
 iframe name="iframe2" src="iframe2.html" frameborder="0" width="100%" height="300px" /iframe 
 /div 

iframe自适应,iframe自适应高度和宽度

内容长这样,但可以看到,高度定死了,没有自适应

 

3. 在onload事件触发时,根据body的高度自适应iframe的高度
 div 
 iframe name="iframe1" onload="this.height=this.contentWindow.document.body.scrollHeight" src="iframe1.html" frameborder="0" width="100%" /iframe 
 iframe name="iframe2" onload="this.height=iframe2.document.body.scrollHeight" src="iframe2.html" frameborder="0" width="100%" /iframe 
 /div 

注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2,两种引用方式是等价的

iframe自适应,iframe自适应高度和宽度

可以发现,高度虽然能自适应,不过只支持高度了 从小到大 的自适应

如iframe2的内容比iframe1的高,后者动态加载出前者能自适应,但前者动态加载出后者就不行了,这种高度减小不了

 

最后的解决办法是

4. 在onload事件中动态设置高度为body高度之前,先将原高度还原为auto或空值

可以用setTimeout(fn,0)将高度设置放到下一轮事件循环中执行,或者在 onbeforeunload 事件中先把高度设置为auto

setTimeout

 var iframes = document.getElementsByTagName('iframe');
 for (var i = 0, j = iframes.length; i ++i) {
 // 放在闭包中,防止iframe触发load事件的时候下标不匹配
 (function(_i) {
 iframes[_i].onload = function() {
 // 提前还原高度
 this.setAttribute('height', 'auto'); // 或设为''
 // 再在下一轮事件循环中设置新高度
 setTimeout(function() {
 iframes[_i].setAttribute('height', iframes[_i].contentWindow.document.body.scrollHeight);
 }, 0);
 })(i);
 }

onbeforeunload

 var iframes = document.getElementsByTagName('iframe');
 for (var i = 0, j = iframes.length; i ++i) {
 // 放在闭包中,防止iframe触发load事件的时候下标不匹配
 (function(_i) {
 iframes[_i].onload = function() {
 this.contentWindow.onbeforeunload = function() {
 iframes[_i].setAttribute('height', 'auto');
 this.setAttribute('height', this.contentWindow.document.body.scrollHeight);
 })(i);
 }

iframe自适应,iframe自适应高度和宽度

基本ok了,不过偶尔(可能是电脑卡了?)会看到些抖动闪动的情况

 

5. 要避免这个情况,可暂时将它隐藏

先设置display为none,再设置为block;或者先设置visibility为hidden,再设置为visible 。 用visibility看起来变化地更自然一点

setTimeout

 var iframes = document.getElementsByTagName('iframe');
 for (var i = 0, j = iframes.length; i ++i) {
 // 放在闭包中,防止iframe触发load事件的时候下标不匹配
 (function(_i) {
 iframes[_i].onload = function() {
 this.style.visibility = 'hidden';
 // this.style.display = 'none';
 // 提前还原高度
 this.setAttribute('height', 'auto'); // 或设为''
 // 再在下一轮事件循环中设置新高度
 setTimeout(function() {
 iframes[_i].setAttribute('height', iframes[_i].contentWindow.document.body.scrollHeight);
 iframes[_i].style.visibility = 'visible';
 // iframes[_i].style.display = 'block';
 }, 0);
 })(i);
 }

onbeforeunload

 var iframes = document.getElementsByTagName('iframe');
 for (var i = 0, j = iframes.length; i ++i) {
 // 放在闭包中,防止iframe触发load事件的时候下标不匹配
 (function(_i) {
 iframes[_i].onload = function() {
 this.contentWindow.onbeforeunload = function() {
 iframes[_i].style.visibility = 'hidden';
 // iframes[_i].style.display = 'none';
 iframes[_i].setAttribute('height', 'auto');
 this.setAttribute('height', this.contentWindow.document.body.scrollHeight);
 this.style.visibility = 'visible';
 // this.style.display = 'block';
 })(i);
 }

 

本文标题:iframe自适应,iframe自适应高度和宽度
http://www.jianglexinxi.cn/yanergaozhi/411036.html

0

精彩评论

暂无评论...
验证码 换一张
取 消