目录
- 一、layer.open() 方法重要参数使用回顾
- content - 内容
- success - 层弹出后的成功回调方法
- yes - 确定按钮回调方法
- 二、js操作父页面常用代码
- 三、子页面改变父页面内容代码实例
- 父页面
- 子页面
当前页面（父框架或父页面）使用layer以iframe层的方式弹出新的窗口（子框架或子页面）时，如何在子页面中访问父页面的元素和函数，从而改变父元素的页面显示，给用户合理舒适的体验。
一、layer.open() 方法重要参数使用回顾
content - 内容
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
| /!* |
| 如果是页面层 |
| */ |
| layer.open({ |
| type: 1, |
| content: '传入任意的文本或html' //这里content是一个普通的String |
| }); |
| layer.open({ |
| type: 1, |
| content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 |
| }); |
| //Ajax获取 |
| $.post('url', {}, function(str){ |
| layer.open({ |
| type: 1, |
| content: str //注意，如果str是object，那么需要字符拼接。 |
| }); |
| }); |
| /!* |
| 如果是iframe层 |
| */ |
| layer.open({ |
| type: 2, |
| content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'] |
| }); |
| /!* |
| 如果是用layer.open执行tips层 |
| */ |
| layer.open({ |
| type: 4, |
| content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM |
| }); |
success - 层弹出后的成功回调方法
当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。
| layer.open({ |
| content: '测试回调', |
| success: function(layero, index){ |
| console.log(layero, index); |
| } |
| }); |
yes - 确定按钮回调方法
该回调携带两个参数，分别为当前层索引、当前层DOM对象。
| layer.open({ |
| content: '测试回调', |
| yes: function(index, layero){ |
| |
| layer.close(index); |
| } |
| }); |
二、js操作父页面常用代码
| |
| parent.$("#id").val(); |
| |
| |
| parent.getMethodValue(); |
| |
| |
| var index = parent.layer.getFrameIndex(window.name); |
| parent.layer.close(index); |
| |
| |
| parent.location.reload(); |
三、子页面改变父页面内容代码实例
父页面
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>父页面</title> |
| <link rel="stylesheet" type="text/css" href="layer.css" rel="external nofollow" rel="external nofollow" > |
| <script type="text/javascript" src="jquery.min.js"></script> |
| <script type="text/javascript" src="layer.js"></script> |
| </head> |
| <body> |
| <p id="parentIframe">实例</p> |
| <button id="ne1">查看变量</button> |
| <button id="ne">打开iframe</button> |
| <script type="text/javascript"> |
| var rel="原始变量"; |
| $(function(){ |
| $('#ne').on('click', function(){ |
| layer.open({ |
| type: 2, |
| area: ['500px', '300px'], |
| maxmin: true, |
| content: 'test.html' |
| }); |
| }); |
| $('#ne1').on('click', function(){ |
| alert(rel); |
| }); |
| }); |
| function setRel(rel){ |
| this.rel=rel; |
| } |
| function getRel(){ |
| return rel; |
| } |
| </script> |
| </body> |
| </html> |
子页面
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>子页面</title> |
| <link rel="stylesheet" type="text/css" href="layer.css" rel="external nofollow" rel="external nofollow" > |
| <script type="text/javascript" src="jquery.min.js"></script> |
| <script type="text/javascript" src="layer.js"></script> |
| </head> |
| <body> |
| <p><input id="name"><button id="new1">改变父类元素</button></p> |
| <button id="new">关闭iframe</button> |
| <script> |
| $(function(){ |
| var str=window.location.href; |
| $("#name").val(str.split('?')[1]); |
| $('#new').on('click', function(){ |
| var index = parent.layer.getFrameIndex(window.name); |
| parent.setRel("子类传值"); |
| parent.layer.close(index); |
| |
| }); |
| $('#new1').on('click', function(){ |
| parent.$('#parentIframe').text($("#name").val()); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
注意：
1、父页面中的‘test.html’改成自己的子页面路径地址
2、官方下载layer.js
3、jquery库的引用必须在layer.js之前