个人技术分享

关于html内嵌vuejs使用iframe无法加载vue实例解决方案，使用bootstrap再iframe

描述：html内嵌vuejs，manage页面也采用vue进行iframe跳转，这个时候无法加载vue实例。具体原因不明，解决方案如下：bootstrap做管理页面，再通过iframe加载html内嵌vue的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Management Dashboard with Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Custom styles for main content */
        #main-content {
            padding: 20px;
            overflow: hidden; /* Hide scrollbar */
            position: relative; /* Required for absolute positioning inside */
        }

        /* Style for iframe */
        #main-iframe {
            width: 100%;
            height: 100%;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto; /* Enable scrolling */
            padding-right: 17px; /* Compensate for scrollbar width */
            box-sizing: content-box; /* Adjust content box for padding-right */
        }

        /* Custom styles for sidebar */
        #sidebar {
            background-color: #343a40; /* Dark background color */
            color: #f8f9fa; /* Light text color */
            height: 100vh; /* Full height */
            position: sticky;
            top: 0;
            overflow-y: auto; /* Enable scrolling */
            padding-top: 20px; /* Padding at the top */
        }

        /* Sidebar title */
        #sidebar .sidebar-title {
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }

        /* Sidebar links */
        #sidebar ul {
            list-style-type: none;
            padding-left: 0;
        }

        #sidebar ul li {
            margin-bottom: 1rem;
        }

        #sidebar ul li a {
            color: #f8f9fa; /* Link text color */
            text-decoration: none;
            display: block;
            padding: 0.5rem;
            transition: background-color 0.3s;
        }

        #sidebar ul li a:hover {
            background-color: #495057; /* Darker background on hover */
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block">
            <div class="position-sticky">
                <!-- Sidebar Title -->
                <div class="sidebar-title">招聘管理</div>

                <!-- Sidebar Links -->
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" onclick="loadPage('tb_applicants_info.html')">浏览应聘信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#" onclick="loadPage('tb_applicants.html')">应聘管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="loadPage('tb_talent_pool.html')">浏览人才库</a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- Main Content Area -->
        <main id="main-content" class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <iframe id="main-iframe" src="" frameborder="0"></iframe>
        </main>
    </div>
</div>

<!-- Bootstrap JS (optional, for certain components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    function loadPage(pageUrl) {
        document.getElementById('main-iframe').src = pageUrl;
    }
</script>

</body>
</html>