使用postMessage()方法可以解决跨域传值的问题,这里贴上posetMessage的API
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
废话不多说直接上代码
我是使用的layer这个前台框架,所以可能和使用window.open()这种方式打开的弹出层有点不同。
父页面
- layer.open({
- //layer弹出层成功打开后,发送消息给子页面
- success: function (layero, index) {
- var data = $('[id*="id"]').val()
- //因为是公司内网,所以url使用的*
- window[layero.find('iframe')[0]['name']].postMessage(data, '*');
- },
- //点击页面的确认按钮后获取子页面的返回值
- yes: function (index, layero) {
- //发送一个'return',表示子页面需要返回值
- window[layero.find('iframe')[0]['name']].postMessage('return', '*')
- layer.close(index);
- }
- });
-
- //监听子页面的postMessage
- function receiveMessage(event) {
- console.log(event.data)//取得子页面传回来的值
- $("#id").val(event.data)
- }
- window.addEventListener('message', receiveMessage, false);
这里贴上一段关于Url参数的说明,各位使用的时候要注意一下安全问题
子页面接收父页面发送的值
- window.addEventListener('message',function(e){
- var value = e.data;
- //子页面如果接收到的data的值是'return',则调用返回方法向父页面发送数据
- if (value != null && value == 'return')
- //返回数据
- returnSelectUser()
- else if (value != null && value.trim().length != 0) {
- //do something
- }
- }, false);
-
- //向父頁面发送數據
- function returnSelectUser() {
- var value = $("#id").text();
- console.log(value)
- parent.postMessage(value, "*");
- }