解决iframe实时获取资源页面显示空白的问题

Posted 天界程序员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决iframe实时获取资源页面显示空白的问题相关的知识,希望对你有一定的参考价值。

1、问题起源

  在使用公司平台开发的时候,内部窗口使用的是iframe,iframe内部的内容是通过定时器一分钟一次获取最新的数据渲染在页面上。
  以上看起来是没有什么问题,但是会造成用户体验问题:

  • 当用户打开其他页面后,超过一分钟后,定时器已经调用了一次,但是用户在返回到那个页面,iframe的内容是一个空白的白板。使用F12在浏览器的开发者模式里面,DOM结构里面的innerHtml是有内容的,但是不知道为什么没有显示出来。我也很懵逼!


2、解决方式

  • (1)判断用户是否还在平台页面
  • (2)获取iframe内部展示信息的DOM元素的信息
  • (3)实时检测该元素的宽高来判断数据信息是否渲染出来了
  • (4)通过定时器来判断元素的宽高,如果为0,则重新加载一次方法渲染页面
  • (5)用户离开平台页面后清除定时器


3、代码实现

// 判断该页面在浏览器是否可见,获取可见状态
// document.visibilityState: 只读属性,它的值是 visible,hidden,prerender 或者 unloaded 之一。
// 如果网页可见会返回 visible,隐藏则返回 hidden。
let page_state = document.visibilityState;
let timer_yxh = null;
let o_yxh = document.getElementById('tableList');


if (page_state == 'visible') 
	// 当页面可见的时候开启定时器,监控iframe资源是否加载出来,
	// 在这里通过元素的宽高来判断,内容是否加载出来
	timer_yxh = setInterval(() => 
		
		// 只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border
		// console.log('div 宽高', o_yxh.style.width, o_yxh.style.height) 

		// 元素的宽度包含padding不包含border
		console.log('client 宽高', o_yxh.clientWidth, o_yxh.clientHeight)
		// console.log('scroll 宽高', o_yxh.scrollWidth, o_yxh.scrollHeight)

		// 元素的宽度包含padding和border
		// console.log('offset 宽高', o_yxh.offsetWidth, o_yxh.offsetHeight)

		console.log('=====================================================')

		// 在定时器内部实时获取元素的宽度,在外部获取可能会造成数据不准确
		var client_W = o_yxh.clientWidth;

		// 如果元素宽度为0,则说明该iframe的内容没有显示出来
		if (client_W === 0) 
			// console.log("调用了方法,重新渲染页面dom结构和inner html内容")

			// 渲染数据的方法
			testFunction();
		

	, 3000)
 else 
	// 如果页面不可见将清除定时器
	clearInterval(timer_yxh)


结语

   以上方法是我解决问题的方法,如需借鉴,请作为参考;因为可能场景不一样,可能会不生效。可能我还是太菜了,如果有更好的方法,请各位大佬评论留言,不吝赐教,谢谢!

以上是关于解决iframe实时获取资源页面显示空白的问题的主要内容,如果未能解决你的问题,请参考以下文章

去滚动条 DIV 嵌套iframe,iframe 里转一个放flash的页面。在页面显示层的时候 有滚动条而且四周还有空白

可以在 iFrame 中显示 HTTPS 内容吗?

HTML iframe 标签 在手机 打开PDF 格式文件 为啥会加载不出来 显示空白页面

postMessage处理iframe 跨域问题

postMessage处理iframe 跨域问题

iframe框架嵌入一个网页,在微信里面打开不显示内容,一片空白,在其他浏览器都正常,紧急求助,在线等!