如何在iframe之间共享数据

近期开始工作了,接手的第一个项目是已近开发完成的,后期有些bug和操作方式要进行修改,我主要负责修改操作方式。

原来系统使用的是用下拉框的方式来选择项目,这种方式简单方便,但是当数据很多的时候,不仅会降低系统运行效率,在上千条的数据中选择记录基本是一件不可能的事情,针对这个问题,我们有两种解决方法::第一种,使用autocomplete插件,用户数据少量数据,可以把数据补全。第二种,专门弹出 一层来选择需要选择的内容,弹出层可以分页、搜索。

我们选择了后一种方法,这就涉及到了iframe之间数据共享的问题。

实现的主要思路如下(点击图片查看大图)

iframe之间共享数据

主框架页弹出两个框架页,子框架页通过主框架页来共享数据,项目使用了ligerUI。

主框架页

	// 流程中弹出窗处理
	function popWindow(url, title, width, height) {
        $.ligerDialog.open({
			url : url,
          	height : height,
          	title : title,
          	width : width,
          	close : function(dialog){
				dialog.frame.$("#classForm").validationEngine("hideAll");
            },
            buttons : [{
              	text : '保存',
              	onclick : function(item, dialog) {
                	var carForm = dialog.frame.$("#classForm");
                	if(carForm.validationEngine("validate")){
                  		//验证通过 保存表单内容
                  		dialog.frame.saveInfo();
                  		// 关闭窗口
                  		dialog.close();
               		}
              	}
            }]
		});
	}

	var monitorEquipId = "";
	var monitorEquip = "";

	function setMonitorEquipInfo(id, name) {
		monitorEquipId = id;
		monitorEquip = name;
	}

	function getMonitorEquipId() {
		return monitorEquipId;
	}

	function getMonitorEquip() {
		return monitorEquip;
	}
 

信息填写页

// 选择监测设备
	function showSelectEquip() {
		var id = $$('#monitorequipid').val();
		var name = $$('#monitorequip').val();
		var config = {
			url : "/baseinfo/abilityChooseAction!chooseEquip.action?polltype="
										+ parent.polltype,
			title : "选择监测设备",
			height : 500,
			width : 600,
			buttons : [ {
				text : "确定",
				onclick : function(item, dialog) {
                                        // 点击确定后,从主框架页获取数据
					$$('#monitorequipid').val(parent.getMonitorEquipId());
					$$('#monitorequip').val(parent.getMonitorEquip());
					dialog.close();
				}
			} ]
		};
                 //调用主框架页的弹出
		parent.popInfoWindow(config);
	}

信息选择页面

	function chooseOk(id, name) {
		parent.setMonitorEquipInfo(id, name);
	}