Layer父子界面交互, require.js的配置和引入layer.js

Layer弹窗感觉还是挺好用的,就是父子界面间的交互不是很清楚。看了不少文档自己又试了挺久,算是找到了一个比较好的方法,记录一下吧。

基本原理: 获取弹出层实体,通过向方法传递参数的形式去弱化父子关系。

基本使用:

弹出页面层-相当于在当前页面中弹出一个div

layer.open({
  type: 1,
  title: false,
  content: '自定义HTML内容'	// string,文本内容或者'

内容

'之类的 });

弹出iframe层-相当于在当前页面中弹出一个div的基础上加一个iframe

layer.open({
  type: 2,
  content: 'LayerChildren.html'	// 任意url
});						

首先说一下弹出页面层-div,这里的父子交互其实是主页面和layer生成并弹出的div之间的交互,很简单,利用 success - 层弹出后的成功回调方法 就可以了。例如在弹出层动态添加一行信息:

// 参数可以是任意父界面,子界面控件或者其他数据
function add(layerDiv){
	var p = document.createElement('p');
	p.innerText = '动态添加';
	layerDiv.appendChild(p);
}

layer.open({
  type: 1,
  title: false,
  content: '',
  success: function(layero, index) {
 	// layero是弹出层的jQuery对象实体
 	add(layero[0]);	// 转为html对象并使用方法
  }
});

弹出页面层-div严格来说和主界面是同一级,利用jQuery和htmlDom的相互转化,通过success自动调用就好了。

Layer父子界面交互, require.js的配置和引入layer.js_第1张图片

其次是弹出iframe, 前面说了success返回的两个参数第一个layero是当前弹出窗口的div, 第二个其实是改div中的iframe索引,但是是从1开始计数的(0是div的索引)。

方法一,通过JQuery方法获取iframe实体,然后传递html对象实现修改:

layer.open({
	type: 2,
	content: 'LayerChildren.html',
	success: function(layero, index) {
		// 获取iframe body方式1
		var body1 = layer.getChildFrame('body', index);
		// 获取iframe body方式2
		var body2 = layero.find('iframe')[0].body;
		add(body2);
	}
});

方法2,通过window对象获取子页面的方法名列表,直接在success中调用,注意间接调用的方法必须在子页面中定义,当然如果是主页面的方法依然是直接使用就好了:

layer.open({
	type: 2,
	content: 'LayerChildren.html',
	success: function(layero, index) {
		// 获取子页面方法字典
		var iframeWin = window[layero.find('iframe')[index-1]['name']];
		console.log(iframeWin);
		// 间接调用子页面方法add
		iframeWin.add("消息");	
	}
});

ok,基本上就是这样了,在success方法中通过获取html对象传参使用,或者获取方法字典实现间接调用子界面方法(子页面要改动父页面建议传参,当然也可以使用parent.$("#id")之类的方法),至于再复杂的给你设置一个callBack也就可以了吧。

PS:
文档中说只引如layer.js就好了,确实。
但是layer没有使用符合require.js的模块化定义方法,需要其他的配置:

项目结构如下
Layer父子界面交互, require.js的配置和引入layer.js_第2张图片

在html页面引入require.js:


Config.js是require的配置文件, 例如jquery.js的路径是js/libs/jquery-3.3.1.js,shim是处理不符合规范或者存在内置依赖的js:

//  require 配置
require.config({
	baseUrl: '../js/',
	paths: {
		// libs
		require: 'libs/require',
		jquery: 'libs/jquery-3.3.1',
		bootstrap: 'libs/bootstrap.min',
		dsbridge: 'libs/dsbridge',
		layer: 'libs/layer/layer',

		// self package
		ui: 'ui',
		net: 'net',
		utils: 'utils'
	},
	shim: {
		'bootstrap': {
			deps: ['jquery']
		},
		'dsbridge': {
			exports: 'bridge'
		},
		'layer': {
      deps: ['jquery'],
      exports: "layer"
    }
	}
	
});

你可能感兴趣的:(前端)