Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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
};
    Login or Signup to reply.
  2. 0

    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");
    }
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search