laravel adminlte3 使用iframe 實現(xiàn)左側(cè)菜單點擊不隨頁面一起刷新的效果

修改菜單代碼，給菜單的 >li>a 中添加target屬性為mainiframe扒吁，菜單視圖代碼 left.blade.php 如下：

<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/home" class="brand-link">
      <img src="/adminlte/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">SDK</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          @foreach( Cache::get('cartes'.\Auth::user()->id) as $carte)
          @if($carte['child'])
          <li class="nav-item has-treeview">
            <span href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                {{$carte['name']}}
                <i class="right fas fa-angle-left"></i>
              </p>
            </span>
            <ul class="nav nav-treeview">
              @foreach($carte['child'] as $child)
              <li class="nav-item">
                <!-- 這里添加 mainiframe 的 target 屬性，為了在點擊菜單的時候改變 content 內(nèi)容 -->
                <a href="/{{$child['module']}}/index" class="nav-link" target="mainiframe">
                  <i class="far fa-circle nav-icon"></i>
                  <p>{{ $child['name'] }}</p>
                </a>
              </li>
              @endforeach
            </ul>
          </li>
          @endif
          @endforeach
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>

登陸成功后跳轉(zhuǎn)到 /home 路由室囊，/home路由執(zhí)行控制器方法雕崩，渲染基礎(chǔ)視圖，這個視圖實現(xiàn)基礎(chǔ)的html渲染融撞，視圖代碼如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title> adminlte | iframe </title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" >
    <!-- Theme style -->
    <link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link  rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="/adminlte/plugins/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="/adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!-- 頁頭視圖 -->
    @include('layouts.header')
    <!-- 左側(cè)菜單視圖 -->
    @include('layouts.left') 
    <div class="content-wrapper">
        <iframe name="mainiframe" id="mainiframe" width="100%"  src="/index"
                frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"
                onload="changeFrameHeight()"
        ></iframe>
    </div>
    <!-- 頁腳視圖 -->
    @include('layouts.footer')
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="{{asset('js/app.js')}}"></script>
<script>
    function changeFrameHeight(){
        var ifm= document.getElementById("mainiframe");
        ifm.height=document.documentElement.clientHeight - 50 - 60;
    }
    window.onresize=function(){
        var ua = navigator.userAgent.toLowerCase();

        var screenwidth = window.screen.width;
        // console.log("屏幕寬度為", screenwidth);
        if (!/iphone|ipad|ipod/.test(ua)) {
        } else {
            document.getElementById("mainiframe").width = screenwidth;
        }
        changeFrameHeight();
    }
</script>
</body>
</html>

說明：iframe 的 src="/index" 指當?shù)顷懗晒?redirect 到 /home 渲染出這個基礎(chǔ)視圖盼铁，基礎(chǔ)視圖中 iframe 的內(nèi)容將從 /index 路由中訪問獲取，相當于初始化 iframe 中 content 的內(nèi)容尝偎，js 方法 changeFrameHeight() 實現(xiàn)iframe的高度控制饶火，ifm.height 的高度需要自己調(diào)試減去多少合適鹏控，減的太少的話html會出現(xiàn)滾動條，這個時候如果 content 中返回的 html 高度也超過瀏覽器的高度肤寝，就會出現(xiàn)兩個滾動條当辐，不美觀。

content的內(nèi)容可以自己定義一個blade模板來使用鲤看，然后view視圖渲染讀取這個模板缘揪，在寫入自己需要的html就好了，例子如下：
app.blade.php 模板：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title> adminlte | iframe </title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" >
    <!-- Theme style -->
    <link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link  rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="/adminlte/plugins/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="/adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.css">

    @yield('links')

</head>
<body class="hold-transition skin-blue sidebar-mini" style="background-color: #ecf0f5;">
    @yield('content')
<div class="control-sidebar-bg"></div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="/adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="/adminlte/dist/js/adminlte.js"></script>
<script src="/adminlte/plugins/moment/moment.min.js"></script>
<!-- OPTIONAL SCRIPTS -->
<script src="/adminlte/plugins/chart.js/Chart.min.js"></script>
<script src="/adminlte/dist/js/demo.js"></script>
<script src="/adminlte/dist/js/pages/dashboard3.js"></script>
<!-- date-range-picker -->
<script src="/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="/adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Bootstrap Switch -->
<script src="/adminlte/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="/adminlte/plugins/datatables/jquery.dataTables.js"></script>
<script src="/adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

@yield('scripts')

</body>

</html>

/index路由返回的視圖（即/home 路由返回視圖中的 iframe 內(nèi)容）：

@extends('layouts.app')

@section('links')
@stop

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">這個是首頁的content</h3>

                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i class="fas fa-minus"></i></button>
                        <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                            <i class="fas fa-times"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <p>歡迎來到后臺管理系統(tǒng)!</p>
                    <p>當前系統(tǒng)時間: {{date('Y-m-d H:i:s',time())}}</p>
                    <p>當前系統(tǒng)時區(qū): {{date_default_timezone_get()}}</p>
                    <p>當前系統(tǒng)版本: Laravel Framework {{app()::VERSION}}</p>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    后臺管理
                </div>
                <!-- /.card-footer-->
            </div>

            <!-- div設(shè)置為透明 避免因為沒有為chart設(shè)置id報錯 -->
            <div style="opacity: 0">
                <canvas id="visitors-chart" height="0"></canvas>
            </div>
            <div style="opacity: 0">
                <canvas id="sales-chart" height="0"></canvas>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
@stop

@section('scripts')
@stop