最新发布 (6)springboot开发教程-使用iframe

发布时间： 2024-06-17，浏览量：545

前面3中集成了adminlte

内容使用<div layout:fragment="content" id="content" ></div>

这种方式存在一定的问题；后面还是觉得内容中使用iframe框架比较好

新建一个index.html,作为默认登录后的跳转页面；


index.html内容如下

<!doctype html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">

<head >
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="/static/css/adminlte.min.css">
    <link rel="stylesheet" href="/static/css/all.min.css">
    <link rel="stylesheet" href="/static/css/highlighter.css">
    <link rel="stylesheet" href="/static/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="/static/css/toastr.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/jquery.overlayScrollbars.min.js"></script>

    <link rel="stylesheet" href="/static/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/bootstraptable/bootstrap-icons.css">
    <script src="/static/bootstraptable/bootstrap-table.min.js"></script>
    <script src="/static/bootstraptable/bootstrap-table-zh-CN.min.js"></script>
    <script src="/static/js/bootbox.min.js"></script>

</head>

<body class="sidebar-mini layout-fixed" style="height: auto;overflow: hidden">
<div class="wrapper">
    <div th:include="common/top :: top"></div>
    <div th:include="common/left :: left"></div>

    <div  id="content"  class="content-wrapper">
        <iframe id="iframe1" src="/home" frameborder="0" width="100%"   ></iframe>

    </div>

    <footer class="main-footer" >
        <strong>Copyright © 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 3.2.0
        </div>
    </footer>
</div>

<div class="modal fade  " id="modal1" data-bs-keyboard="false" aria-hidden="true" data-bs-backdrop="static" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="model-title">新增</h4>
                <button type="button" class="close" onclick="$('#modal1').modal('hide')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="height: 600px;overflow: hidden" >
                <iframe id="modal-iframe" src="/404" frameborder="0" width="100%" height="100%"  ></iframe>
            </div>

        </div>
    </div>
</div>

<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/adminlte.min.js"></script>

<script src="/static/js/toastr.min.js"></script>
<script src="/static/js/main.js"></script>

</body>

<script>

    //需要设置两次
    function setFrameHeight(){
        let myFrame = document.getElementById("iframe1");
        if(myFrame){
            myFrame.style.height = window.innerHeight-114 + "px";
        }

    }
    window.onload = function(){
        let myFrame = document.getElementById("iframe1");
        //iframe加载的时候需要设置一次
        myFrame.onload = function(){
            myFrame.style.height = window.innerHeight-114 + "px";
        }
        //在父页面载入的时候需要设置一次
        setFrameHeight()
    }
    window.addEventListener('resize', function() {
        // 当窗口大小改变时，调整页面布局
        setFrameHeight()
    });


    function openDialog(title,url){
        $("#model-title").text(title)
        $("#modal-iframe").attr("src",url)
        $('#modal1').modal().css({
            'margin-top': function () {
                return 100+'px';
            }
        });
        $('#modal1').modal("show")
    }


    $("#logout").on("click",function () {
        $.getJSON("/sysUser/logout",function (e) {
            if(e.code==0)
                top.location.href = '/home';
        })
    })

 

</script>
</html>


红色为内容展示时的iframe，可通过对iframe ，src的设置实现页面的变化

function fn_target(e){

    let url=$(e).attr("data-url")
        $('#iframe1').attr("src",url);

}



绿色部分增加了一个统一弹框页面，可以使用统一方法弹出框层

 function openDialog(title,url){
        $("#model-title").text(title)
        $("#modal-iframe").attr("src",url)
        $('#modal1').modal().css({
            'margin-top': function () {
                return 100+'px';
            }
        });
        $('#modal1').modal("show")
    }



导航栏设置跳转方式


<li class="nav-item">
 <a href="javascript:;" data-url="/sysUser/list" onclick="fn_target(this)" class="nav-link">
 <i class="far fa-circle nav-icon"></i>
  <p>用户管理</p>
 </a>
</li>



热门文章 经典语录

热门文章 热门文章

查看更多