layui 出现跨域问题from accessing a cross-origin frame

0 1659
索鸟 2020-11-06
需要:0索币

使用postMessage()方法可以解决跨域传值的问题,这里贴上posetMessage的API

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

废话不多说直接上代码

我是使用的layer这个前台框架,所以可能和使用window.open()这种方式打开的弹出层有点不同。

父页面

  1. layer.open({
  2. //layer弹出层成功打开后,发送消息给子页面
  3. success: function (layero, index) {
  4. var data = $('[id*="id"]').val()
  5. //因为是公司内网,所以url使用的*
  6. window[layero.find('iframe')[0]['name']].postMessage(data, '*');
  7. },
  8. //点击页面的确认按钮后获取子页面的返回值
  9. yes: function (index, layero) {
  10. //发送一个'return',表示子页面需要返回值
  11. window[layero.find('iframe')[0]['name']].postMessage('return', '*')
  12. layer.close(index);
  13. }
  14. });
  15. //监听子页面的postMessage
  16. function receiveMessage(event) {
  17. console.log(event.data)//取得子页面传回来的值
  18. $("#id").val(event.data)
  19. }
  20. window.addEventListener('message', receiveMessage, false);

这里贴上一段关于Url参数的说明,各位使用的时候要注意一下安全问题

子页面接收父页面发送的值

  1. window.addEventListener('message',function(e){
  2. var value = e.data;
  3. //子页面如果接收到的data的值是'return',则调用返回方法向父页面发送数据
  4. if (value != null && value == 'return')
  5. //返回数据
  6. returnSelectUser()
  7. else if (value != null && value.trim().length != 0) {
  8. //do something
  9. }
  10. }, false);
  11. //向父頁面发送數據
  12. function returnSelectUser() {
  13. var value = $("#id").text();
  14. console.log(value)
  15. parent.postMessage(value, "*");
  16. }
回帖
  • 消灭零回复
相关主题
2020年最新最新Kubernetes视频教程(K8s)教程 2
程序员转型之制作网课变现,月入过万告别996 1
索鸟快传2.0发布啦 1
两个不同网络的电脑怎么实现文件的互相访问呢? 1
网盘多账号登录软件 1
Java实战闲云旅游项目基于vue+element-ui 1
单点登录技术解决方案基于OAuth2.0的网关鉴权RSA算法生成令牌 1
QT5获取剪贴板上文本信息QT设置剪贴板内容 1
springboot2实战在线购物系统电商系统 1
python web实战之爱家租房项目 1
windows COM实用入门教程 1
C++游戏开发之C++实现的水果忍者游戏 1
计算机视觉库opencv教程 1
node.js实战图书管理系统express框架实现 1
C++实战教程之远程桌面远程控制实战 1
相关主题
PHP7报A non well formed numeric value encountered 0
Linux系统下关闭mongodb的几种命令分享 0
mongodb删除数据、删除集合、删除数据库的命令 0
Git&Github极速入门与攻坚实战课程 0
python爬虫教程使用Django和scrapy实现 0
libnetsnmpmibs.so.31: cannot open shared object file 0
数据结构和算法视频教程 0
redis的hash结构怎么删除数据呢? 0
C++和LUA解析器的数据交互实战视频 0
mongodb errmsg" : "too many users are authenticated 0
C++基础入门视频教程 0
用30个小时精通C++视频教程可能吗? 0
C++分布式多线程游戏服务器开发视频教程socket tcp boost库 0
C++培训教程就业班教程 0
layui的util工具格式时间戳为字符串 0
C++实战教程之远程桌面远程控制实战 1
网络安全培训视频教程 0
LINUX_C++软件工程师视频教程高级项目实战 0
C++高级数据结构与算法视频教程 0
跨域问题很头疼?通过配置nginx轻松解决ajax跨域问题 0