取到easyui的tab下iframe方法-优快云博客

本文链接：https://blog.youkuaiyun.com/hqmln/article/details/84284014

本文介绍如何在EasyUI的Tab组件中实现每次切换Tab时动态刷新对应的iframe内容。通过设置标记变量和利用jQuery选择器，可以有效地更新指定Tab内的iframe源地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在使用easyui的tab时，有时候需要每次点击tab头，动态刷新该tab下的iframe的内容

tab的html如下：

<div id="tab-user-right" > 
		<div title="直接分配的操作权限" id="user-right-act">			
			<iframe scrolling="yes" frameborder="0" height="500" width="100%"  frameborder="0" ></iframe>
		</div>
		<div title="拥有的角色" id="user-role">			
			<iframe scrolling="yes" frameborder="0" height="500" width="100%"  frameborder="0" ></iframe>
		</div>
		<div title="继承自角色的权限" id="user-right-role">			
			<iframe scrolling="yes" frameborder="0" height="500" width="100%"  frameborder="0" ></iframe>
		</div>
		<div title="全部操作权限" id="user-right-all">			
			<iframe scrolling="yes" frameborder="0" height="500" width="100%"  frameborder="0" ></iframe>
		</div>
		<div title="数据权限-机构" id="user-right-org">			
			<iframe scrolling="yes" frameborder="0" height="500" width="100%"  frameborder="0" ></iframe>
		</div>
		<div title="数据权限-部门" id="user-right-dept">			
			<iframe scrolling="yes" frameborder="0" height="500" width="100%"  frameborder="0" ></iframe>
		</div>
	</div>

动态刷新的js如下：

//标记是否从新刷新
		var reload="T";
		$(function(){
			$('#tab-user-right').tabs({ 
				onSelect: function(){
					openTab();										
				}
			});
		});
		
		function openTab(){			
			var tab = $('#tab-user-right').tabs('getSelected');
			var tbId = tab.attr("id");
			//获取tab的iframe对象
			var tbIframe = $("#"+tbId+" iframe:first-child");
			if(reload=="T"){				
				tbIframe.attr("src",tbId+'.action?userId='+userId);
			}else{		
				if( tbIframe.attr("src")==""){
				  tbIframe.attr("src",tbId+'.action?userId='+userId);
				}
			}
		}

注意一下代码：

var tab = $('#tab-user-right').tabs('getSelected');
			var tbId = tab.attr("id");
			//获取tab的iframe对象
			var tbIframe = $("#"+tbId+" iframe:first-child");

可以获得iframe