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

Posted 2021-10-31 天界程序员

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)
}

结语

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