1. 程式人生 > >Layui-admin-iframe通過頁面連結直接在iframe內開啟一個新的頁面,實現單頁面的效果

Layui-admin-iframe通過頁面連結直接在iframe內開啟一個新的頁面,實現單頁面的效果

前言:

  使用Layui-admin做後臺管理框架有很長的一段時間了,但是一直沒有對框架內iframe選單欄切換跳轉做深入的瞭解。今天有一個這樣的需求就是通過獲取超連結中傳遞過來的跳轉地址和對應的tabs的title名稱引數,在layui-admin-iframe中自動開啟一個新的tabs頁面,不需要點選左邊的選單欄,實現一個單頁面的效果。

程式碼實現:

請求的超連結如下所示:

https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首頁

其中transferUrl:為需要開啟的頁面地址

openTabsName:為tabs標題名稱

layui預先載入,獲取超連結中傳遞過來的跳轉頁面地址和tabs title名稱在iframe中開啟:

//layui預先載入
layui.use('index', function(){
var transferUrl =getQueryVariable("tabName");
var openTabsName =getQueryVariable("name");
 //初始化頁面調轉
 layui.index.openTabsPage(transferUrl,openTabsName);
})

Js獲取超連結裡面傳遞的引數值:

如獲取超連結[https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首頁] 中的transferUrl和openTabsName中的值 

function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
console.log(decodeURIComponent(query));//js解碼(超連結中的中文獲取時可能存在編碼的情況)
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return decodeURIComponent(pair[1]);}
}
return(false);
}

關於存在多了一級選單欄,而連結中所帶的地址又不是第一個一級選單欄中的子選單欄我們該如何解決初次載入顯示子級選單欄問題?  

我們可以在導航欄中設定左側選單導航欄預設展開的屬性,如下所示:

layui-nav-itemed的屬性預設導航全部展開

<li class="layui-nav-item layui-nav-itemed">
</li>

效果圖,如下所示: