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

本文主要是介绍关于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>