layer彈出層的內容頁點選按鈕跳轉到新的頁面問題
阿新 • • 發佈:2018-12-31
在參與的一個專案中,有一個這樣的需求,匯入基礎資料成功後,預設彈出一個管理員登入頁,點選登入按鈕,需要跳到管理頁面。
匯入頁按鈕:
<button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>匯入</i></button>
匯入按鈕的點選事件,點選後會出現layer彈出層
$("#start").click(function(){
// 判斷有沒有選擇區域
var regionCode = $("#regionCode").val();
if(regionCode!=0){
// 獲取區域名,用於匯入成功後標題顯示
var regionName = $("#regionCode").find("option:selected").text();
$.ajax({
url:'<%=path%>/org/importMemoryOrgs?regionCode='+regionCode,
type:'post' ,
dataType:'json',
success:function(res){
console.log("成功");
console.log(res);
// 引導使用者再次進入匯入頁,驗證效果是下拉框不顯示曾經匯入過的區域
if(res.success == true){
layer.open({
type: 2
, title: regionName+'黨組織架構匯入成功'
//, area: ['690px', '350px']
, area: ['750px', '50%']
, shade: 0.5
, maxmin: true
, content: '<%=path%>/orgAdminLoginPage?username='+regionCode
});
}else{
layer.open({
type: 1 //此處以iframe舉例
, title: regionName+'黨組織架構匯入失敗'
//, area: ['690px', '350px']
, area: ['750px', '75%']
, shade: 0.5
, maxmin: true
, content: $("#error")
});
$("#Content").html(res.msg);
}
},error:function(res){
console.log("失敗");
}
});
}else{
alert("請選擇區域");
}
});
<a class="layui-btn layui-btn-normal" style="margin:0 auto;" href="<%=path%>/areaLogin?username=${username}&&password=123456">以地方組織管理員身份登入</a>
直接這樣點選的話,管理頁面的內容全部還在彈出層,不是我想要的效果。
解決思路
本來想通過把a標籤改成button,然後寫個onclick事件,腳本里使用layer.close()去關閉彈出層,然後location.href=”url地址”,試了下沒用,本人一直是做後臺開發的,前端知識薄弱。
最終解決方案,直接在a標籤加上target=”_top”,解決問題。
關於target=”_top”的資料
target=”_top” , 屬性作用使得文件載入包含這個超連結的視窗,用 _top 目標將會清除所有被包含的框架並將文件載入整個瀏覽器視窗。
target=”_parent” ,屬性作用使得文件載入父視窗或者包含來超連結引用的框架的框架集。如果這個引用是在視窗或者在頂級框架中,那麼它與目標 _self 等效。
target=”_blank” ,瀏覽器總在一個新開啟、未命名的視窗中載入目標文件
target=”_self”, 它使得目標文件載入並顯示在相同的框架或者視窗中作為源文件。(此處就是實現你的每次跳轉都在同一個視窗的核心點)