异步加载子页面

最新推荐文章于 2021-09-19 15:56:45 发布

原创最新推荐文章于 2021-09-19 15:56:45 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

28 篇文章

订阅专栏

本文记录了在运营后台中，如何通过iframe与JQuery实现根据ID加载关联子表数据的方法，包括两种实现方式及其代码示例。

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

今天在编写运营后台的时候，遇到一个需要在同一页面中根据当前某条数据的Id，将关联的子表数据加载到同一页面中，想到的实现方式有两种，最终选择的是第二种方式，在此仅作记录

实现方式：

（1）使用iframe实现

主数据列表中通过插入一个iframe元素，默认加载标示为0，在用户点击某一字段时，触发加载，一次加载后，改写加载标示为1，之后仅作显示即可。

主要代码：

HTML部分

<tr id="mainData<s:property value="id" />" isShow="0" loadpage="0" style="display:none">
   <td colspan=17>
	<iframe id="mainDataFreame<s:property value="id" />" >
	</iframe>
   <td>
</tr>

javaScript部分：

function showDataById(id)
{
	if($("#mainData"+id).attr("loadpage")=="0")
	{
		
		var url="dataAction!list?mainDataId="+id;
		var mainIframe = window.frames["mainIframe"+id];
		mainIframe.src=url;
		$("#mainData"+id).attr("loadpage","1");
	}
	if($("#mainData"+id).prop("isShow")=="1")
	{
		$("#mainData"+id).prop("isShow","0");
		$("#mainData"+id).hide();
	}
	else
	{
		$("#mainData"+id).prop("isShow","1");
		$("#mainData"+id).show();
	}
}

（2）使用JQuery load方法加载html到div中

HTML代码部分：

<tr id="mainData<s:property value="id" />" tropen="0" loadpage="0" style="display:none">
    <td colspan=17>
	<div id="#mainDataDiv<s:property value="id" />" width="100%" height="500px">
    </div>
    <td>
</tr>

Javascript部分：

function showDataById(id)
{
	if($("#mainData"+id).attr("loadpage")=="0")
	{
		
		var url="dataAction!list?mainDataId="+id;
		$("#mainDataDiv"+id).load(url);
		$("#mainData"+id).attr("loadpage","1");
	}
	if($("#mainData"+id).prop("isShow")=="1")
	{
		$("#mainData"+id).prop("isShow","0");
		$("#mainData"+id).hide();
	}
	else
	{
		$("#mainData"+id).prop("isShow","1");
		$("#mainData"+id).show();
	}
}