这篇“layui.layer弹出层怎么改变父页面内容”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“layui.layer弹出层怎么改变父页面内容”文章吧。
当前页面（父框架或父页面）使用layer以iframe层的方式弹出新的窗口（子框架或子页面）时，如何在子页面中访问父页面的元素和函数，从而改变父元素的页面显示，给用户合理舒适的体验。
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会携带两个参数，分别是当前层DOM当前层索引。
layer.open({
content: '测试回调',
success: function(layero, index){
console.log(layero, index);
}
});该回调携带两个参数，分别为当前层索引、当前层DOM对象。
layer.open({
content: '测试回调',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
});// 1、访问父页面元素值
parent.$("#id").val();
// 2、访问父页面方法
parent.getMethodValue();//访问父页面方法
// 3、如何关闭弹出的子页面窗口
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);//关闭弹出的子页面窗口
// 4、如何从子页面执行刷新父页面操作
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之前
以上就是关于“layui.layer弹出层怎么改变父页面内容”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
