溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
