no access to window.open html id's with javascript

Question

no access to window.open html id's with javascript

66 Views Asked by creeser At 02 January 2024 at 19:13

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>

Original Q&A

There are 2 best solutions below

**Alex Kudryashev** · Answer 1 · 2024-01-02T19:56:34.743000

Wait till the document in window.open(...) is loaded.

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
};

**Barmar** · Answer 2 · 2024-01-02T19:56:46.827000

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.

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");
  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");
    }
  });
});

no access to window.open html id's with javascript

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in WINDOW.OPEN

Trending Questions

Popular # Hahtags

Popular Questions