Layui后台實現頁面內部的iframe跳轉


最近在學習Layui的過程中,遇到了內部iframe在點擊側邊欄之后無法跳轉的情況,故記錄此解決方案以做備忘,防止下次再有這樣的事情發生。

 

 

 頁面想點擊左邊和上面的側邊欄,然后只在右邊的主體白色部分進行頁面的轉變。

 

首先把下面復制到布局的內容主體區域上:
<iframe id="iframeMain" src="" style="width: 100%"; height="100%";></iframe>

導入jquery(這里用官網jq實現,也可以用內置的jquery或者原生js):
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

在jq方法體寫邏輯:
    //模擬單頁跳轉

<script>
$(document).ready(function(){
$("dd>a").click(function (e) {
e.preventDefault();
$("#iframeMain").attr("src",$(this).attr("href"));
});
});
</script>

邏輯:通過jq拿a的href值放到iframe的src屬性上
解釋: 
e.preventDefault();:設置a的點擊事件不跳轉到另一個頁面
 $("iframeMain").attr("src",$(this).attr("href"));:給iframe添加src屬性,值為a的href值

 

 

 

側邊欄設置跳轉鏈接像是這樣,設置  dd  格式類同"顯示表單"與“news”.

 

 

 頭部欄設置跳轉鏈接像是這樣,設置  li  格式類同“用戶”。

 

 

 

 iframe設置id,格式類同上圖。

 

 

 script設置   li 與  dd  的格式

 

 

 

 設置后跳轉就只在右側主體界面顯示而不改變其他設置。

 

參考詳見:https://bbs.csdn.net/topics/393507503


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM