Layui-admin-iframe通過頁面鏈接直接在iframe內打開一個新的頁面，實現單頁面的效果

• 2020 年 3 月 30 日
• 筆記

前言：

　　使用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>

效果圖，如下所示：