- 修改菜单代码，给菜单的 >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 内容 -->
<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>
- 登陆成功后跳转到 /home 路由，/home路由执行控制器方法，渲染基础视图，这个视图实现基础的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" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" 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')
<!-- 左侧菜单视图 -->
@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" 指当登陆成功后 redirect 到 /home 渲染出这个基础视图，基础视图中 iframe 的内容将从 /index 路由中访问获取， 相当于初始化 iframe 中 content 的内容，js 方法 changeFrameHeight() 实现iframe的高度控制，ifm.height 的高度需要自己调试减去多少合适，减的太少的话html会出现滚动条，这个时候如果 content 中返回的 html 高度也超过浏览器的高度，就会出现两个滚动条，不美观。
- content的内容可以自己定义一个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" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" 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 内容 ）：
@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>欢迎来到后台管理系统!</p>
<p>当前系统时间: {{date('Y-m-d H:i:s',time())}}</p>
<p>当前系统时区: {{date_default_timezone_get()}}</p>
<p>当前系统版本: Laravel Framework {{app()::VERSION}}</p>
</div>
<!-- /.card-body -->
<div class="card-footer">
后台管理
</div>
<!-- /.card-footer-->
</div>
<!-- div设置为透明 避免因为没有为chart设置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
