没有访问window.open html id的JavaScript

bxpogfeg 于 2024-01-05 发布在 Java

关注(0)|答案(2)|浏览(116)

无法访问window.open中的ID。窗口显示，内容在那里，但var table-modal返回null。在浏览器中浏览JavaScript，有一个window.iframe.document存在。我不知道在文档中的哪里可以找到“id”。为什么我得到一个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内容是：

<!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>

型

JavaScript

来源：https://stackoverflow.com/questions/77748107/no-access-to-window-open-html-ids-with-javascript

2条答案

按热度按时间

5vf7fwbs1#

问题是窗口是异步打开的，在尝试访问其内容之前，您没有等待它完成HTML加载。您需要为其DOMContentLoaded事件使用侦听器。

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

字符串

赞(0）回复(0）举报 2024-01-05

j5fpnvbx2#

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

字符串

赞(0）回复(0）举报 2024-01-05

我来回答

没有访问window.open html id的JavaScript

2条答案

相关问题

热门标签

最新问答