我无法在window.open中获取ID。窗口已经显示出来了,并且内容也已加载,但是变量table-modal返回的是null。在浏览器中逐步查看JavaScript时,存在一个window.iframe.document对象。但我不知道如何在这个文档中找到所需的'ids'。为什么我得到的是null?
代码段如下:
document.getElementById("showModalBtnIs").addEventListener("click", function () {
// 创建一个新的窗口并设置其尺寸
window.iframeWindow = window.open("static/issafemodal.html", "_blank", "resizable=1,scrollbars=1,height=400,width=400,left=100,toolbar=0,menubar=0,status=1");
// 存储对iframe文档的引用
window.iframeDocument = window.iframeWindow.document;
if (window.iframeDocument) {
let table_modal = window.iframeDocument.getElementById("issafe_table_modal");
table_modal.style.display = "block";
let closeModal = table_modal.querySelector(".close");
HTML内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/styles.css') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<title>IsSafe 设置</title>
</head>
<body>
<style>
h4 {
text-align: center;
color: gray;
margin: 0
}
body {
padding: 1em;
margin: 0
}
</style>
<div id="issafe_table_modal">
<div id="modalContent">
<h4>IsSafe 设置</h4>
<table class="table-striped" id="dataTableIs">
<thead>
<tr>
<th>键</th>
<th>值</th>
<th>状态</th>
</tr>
</thead>
<tbody id="tableBodyIs">
</tbody>
</table>
<div class="text-center">
<span class="btn btn-secondary close" id='btn-issafe'>关闭</span>
</div>
</div>
</div>
</body>
</html>