iframe简单使用 获取iframe 获取iframe 元素值 iframe获取父页面的信息

Posted 2023-03-30 追求～

文章目录

• • 1.iframe简单使用
  • 2.获取iframe
  • 3.获取iframe 元素值
  • 4.iframe获取父页面的信息：

1.iframe简单使用

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 html 文档中嵌入另一个文档。

<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>

• width插入页的宽；
• height插入页的高；
• scrolling 是否显示页面滚动条（可选的参数为auto、yes、no，如果省略这个参数，则默认为auto）；
• frameborder 边框大小；

注意：URL建议用绝对路径

<iframe width=0 height=0 frameborder=0 scrolling=auto src=WWW .webjx.com></iframe>

如果一个页面里面有框架，点页面里的连接，要求在这个<iframe> 里打开。在<iframe >中规定name

<iframe name=**  ></iframe>

然后在修改默认打开模式，：网页head中加上<a href=URL target=**>或部分连接的目标框架设为（**）

要插入一个页面。要求只拿中间一部分。其他的都不要。

代码：

<iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://www.webjx.com/"  frameborder=no scrolling=no  width=776  height=2500></iframe>

控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0；控制框架覆盖上部分的深度 vspace=-170

scrolling滚动条要否（auto、yes、no） frameborder框架的边框大小，width=776 height=2500此框架的大小。

2.获取iframe

常用获取元素的方法，dom ,jQ等;

var ifr = document.getElementById(‘mainIframe0’)

3.获取iframe 元素值

ifr.contentWindow

拿到的是window 对象

Window postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window,
…

ifr.contentWindow.值 定义的全局变量。

4.iframe获取父页面的信息：

获取父页面元素的值：

jquery方式：$("#auditDate",parent.document).val();

js方式：parent.document.getElementById(“auditDate”).value;

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

结语

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