无法访问window.open中的ID。窗口显示，内容就在那里，但 var table-modal 返回 null。在浏览器中运行 javascript 时，存在一个 window.iframe.document 。我不知道在文档中的哪里可以找到“ids”。为什么我得到的是空值
document.getElementById("showModalBtnIs").addEventListener("click", function () {
// Create a new window and set its dimensions
window.iframeWindow = window.open("static/issafemodal.html", "_blank", "resizable=1,scrollbars=1,height=400, width=400, left=100, toolbar=0, menubar=0,status=1");
// Store a reference to the iframe's document
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<title>IsSafe Settings</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 Settings</h4>
<table class="table-striped" id="dataTableIs">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th>Status</th>
</tr>
</thead>
<tbody id="tableBodyIs">
</tbody>
</table>
<div class="text-center">
<span class="btn btn-secondary close" id='btn-issafe'>Close</span>
</div>
</div>
</div>
</body>
</html>
问题在于窗口是异步打开的，您在尝试访问其内容之前不会等待它完成 HTML 加载。您需要为其
DOMContentLoadeddocument.getElementById("showModalBtnIs").addEventListener("click", function() {
// Create a new window and set its dimensions
window.iframeWindow = window.open("static/issafemodal.html", "_blank", "resizable=1,scrollbars=1,height=400, width=400, left=100, toolbar=0, menubar=0,status=1");
window.iframeWindow.addEventListener("DOMContentLoaded", function() {
// Store a reference to the iframe's document
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");
}
});
});
等待
window.open(...)window.iframeWindow = window.open("static/issafemodal.html", "_blank", "resizable=1,scrollbars=1,height=400, width=400, left=100, toolbar=0, menubar=0,status=1");
window.iframeWindow.onload = function(){
window.iframeDocument = window.iframeWindow.document;
// you other code here
};