Cannot get access to the IDs in the window.open. The window shows, and the content is in there, but var table-modal returns null. In the browser walking thought the javascript, there is a window.iframe.document present. I don’t know where in the document to find the ‘ids’. Why an I getting a null
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 content is:
<!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>
2
Answers
Wait till the document in
window.open(...)
is loaded.The problem is that the window is opened asynchronously, and you’re not waiting for it to complete loading the HTML before you try to access its contents. You need to use a listener for its
DOMContentLoaded
event.