layer.open 父页面获取子页面的参数

layer.open 父页面获取子页面的参数

// An highlighted block
		parent.layer.open({
			type: 2, //类型,解析url
			closeBtn: 1, //关闭按钮是否显示 1显示0不显示
			title: '选择经纬度', //页面标题
			shadeClose: false, //点击遮罩区域是否关闭页面
			shade: 0.8,  //遮罩透明度
			area: ['800px', '600px'],  //弹出层页面比例
			content: 'getPointController/getPoint' ,//弹出层的url
			btn: '确定',
			yes:function(index,layero){
				//obj可以调用子页面的任何方法
				var obj = $(layero).find("iframe")[0].contentWindow;
				var point = obj.submitCoordinate();
				var pointArray = point.split(",");
				var jd = pointArray[0];
				var wd = pointArray[1];
				document.getElementById("latitude").value = jd;
				document.getElementById("longitude").value = wd;
			}
		});

上述方法中的 obj 对象可以调用子页面js 里的方法。

<think>好的,我现在需要解决用户的问题:在使用top.layer.open打开的页面中如何获取父页面传递的参数。首先,我得回忆一下相关的知识,尤其是关于layUI和layer.open的使用方法。根据用户提供的引用内容,特别是引用[2]提到,top.layer.open()的内容窗口可以通过contentWindow访问,而父页面页面之间的数据交互可能需要用到这个属性。 接下来,我需要考虑常见的参数传递方式。通常,父页面在打开页面时,可以通过URL参数传递数据,或者在content属性中直接传递参数对象。例如,在layer.open的content配置中设置参数,或者使用success回调函数来传递数据。 用户提到的是top.layer.open,这可能涉及到跨iframe的情况,因为top指向最顶层的窗口。如果父页面页面在不同的iframe中,可能需要通过top来访问正确的上下文。根据引用[2],contentWindow属性允许父页面访问页面的window对象,反过来,页面也可以通过parent或top来访问父页面的window对象。 然后,我需要具体分析可能的传参方式。比如,父页面在打开页面时,可以将参数附加到URL上,页面通过解析URL获取参数。或者,父页面在content的页面加载完成后,通过contentWindow将参数传递给页面。另外,使用success回调函数,在页面加载完成后,父页面可以调用页面的函数来传递参数。 接下来,我需要验证这些方法的可行性。例如,通过URL传参的话,页面可以使用JavaScript的location.search来获取查询字符串,然后解析参数。这种方法简单,但可能不够安全,参数暴露在URL中。另一种方法是通过content配置中的参数对象,比如在content属性中设置一个带有参数页面路径,或者在页面加载完成后,父页面通过contentWindow将参数写入页面的全局变量中。 根据引用[3]中的例,用户提到在页面中选择数据表格的,可能需要父页面传递初始参数或回调函数。因此,可能的解决方案包括: 1. URL参数传递:父页面在打开页面时,将参数附加到URL,页面解析URL获取参数。 2. 使用success回调函数:在layer.open的success回调中,通过contentWindow将参数传递给页面。 3. 全局变量或函数:父页面定义全局变量或函数,页面通过top或parent访问这些变量或函数来获取参数。 现在需要详细说明每种方法的步骤,并给出示例代码。同时,要注意跨域问题,如果父页面页面同源,这些方法才有效。如果跨域,可能需要其他方式如postMessage。 例如,URL传参的方法: 父页面: var param = {id: 123}; top.layer.open({ type: 2, content: 'child.html?id=' + encodeURIComponent(JSON.stringify(param)), // 其他参数... }); 页面: 在child.html中,通过解析location.search获取参数: var params = JSON.parse(decodeURIComponent(new URLSearchParams(location.search).get('id'))); 另一种方法,使用success回调传递参数父页面: top.layer.open({ type: 2, content: 'child.html', success: function(layero, index){ var iframeWin = top.window[layero.find('iframe')[0]['name']]; iframeWin.setParentParams({id: 123}); } }); 页面中定义setParentParams函数来接收参数。 或者,页面通过parent或top直接访问父页面的变量: 父页面定义: window.parentParams = {id: 123}; 页面: var params = top.window.parentParams; 但这种方法需要注意变量作用域和时机,确保页面访问时父页面的变量已设置。 需要指出这些方法的优缺点。比如URL传参适合简单数据,但可能长度受限;success回调更灵活,但需要页面有相应的接收函数;全局变量容易造成命名冲突,需谨慎使用。 最后,总结几种方法,给出具体步骤和代码示例,帮助用户选择合适的方式。</think>在通过$top.layer.open()$打开的页面获取父页面传递的参数,可以通过以下三种常用方法实现: ### 方法一:通过URL参数传递(适合简单参数) 1. **父页面**在打开页面时附加参数到URL: ```javascript var params = {id: 123, name: 'test'}; top.layer.open({ type: 2, title: '页面', content: 'child.html?data=' + encodeURIComponent(JSON.stringify(params)), area: ['800px', '500px'] }); ``` 2. **页面**解析URL获取参数: ```javascript // 在child.html中 const urlParams = new URLSearchParams(window.location.search); const receivedData = JSON.parse(decodeURIComponent(urlParams.get('data'))); console.log(receivedData.id); // 输出123 [^2] ``` ### 方法二:通过contentWindow直接传递(推荐) 1. **父页面**在`success`回调中使用`contentWindow`传递参数: ```javascript top.layer.open({ type: 2, content: 'child.html', success: function(layero, index) { const iframe = layero.find('iframe')[0]; const childWindow = iframe.contentWindow; // 获取页面窗口对象 childWindow.parentParams = {id: 456, name: 'data'}; // 直接注入参数 } }); ``` 2. **页面**直接访问注入的全局变量: ```javascript // 在child.html中 console.log(window.parentParams.name); // 输出"data" [^2] ``` ### 方法三:通过回调函数交互(适合动态更新) 1. **父页面**定义回调函数并触发: ```javascript // 父页面定义函数 window.receiveDataFromParent = function(data) { console.log('收到父页面参数:', data); }; top.layer.open({ type: 2, content: 'child.html', success: function(layero, index) { const childWindow = layero.find('iframe')[0].contentWindow; childWindow.postMessage({type: 'params', data: {id: 789}}, '*'); // 使用postMessage } }); ``` 2. **页面**监听消息事件: ```javascript // 在child.html中 window.addEventListener('message', (event) => { if (event.data.type === 'params') { console.log(event.data.data.id); // 输出789 [^4] } }); ``` ### 方法对比 | 方法 | 优点 | 缺点 | |------------|--------------------------|--------------------------| | URL传参 | 实现简单,兼容性好 | 参数长度受限,暴露在地址栏 | | contentWindow | 实时性强,适合复杂对象 | 需确保页面加载完成 | | postMessage| 安全,支持跨域通信 | 代码量稍多 | ### 注意事项 1. **同源策略**:所有方法要求父页面同源,跨域场景需使用`postMessage`并验证来源[^2]。 2. **时机控制**:使用`contentWindow`时需在`success`回调中操作,确保iframe已加载完成[^3]。 3. **数据安全**:敏感参数建议通过加密传输或使用`postMessage`的安全模式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

OOObject

你的鼓励是我创作的最大源泉

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值