Question

我的Google Chrome坚持认为我的iframe为空。奇怪的是，这会毫无障碍地返回元素：

iframe = document.getElementById("main");

但是当我尝试访问iframe的任何属性时，它表示我无法从null获取属性（即使通过元素本身也可以返回。）

我知道我可能要等到它被加载，但添加一个事件监听器不起作用，因为它给了我同样的错误。

编辑：有人问起它的背景......

<!DOCTYPE html>
<html>
    <head>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="start()">
      <noscript>Your browser is ancient and doesn't support JavaScript.</noscript>
                <table>
                    <tr>
                        <th colspan=10 rowspan=1><h1>TITLE</h1></th>
                    </tr>
                    <tbody>
                    <tr rowspan=2><td colspan=10>&nbsp;</td></tr>
                    <tr rowspan=10>
                        <td colspan=10>
                            <div class="codegena_iframe">
                                <iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <font size="30"><div id="test"></div></font>
    </body>
</html>

这是我的html元素：

<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>

这是我的JavaScript：

iframe = document.getElementById("main");

function start() {
    iframe.addEventListener("load", function() {
        alert("foo");
    });
}

请帮助，我不知道该怎么办。感谢

Answer 1

当start函数运行时，很可能没有完全加载DOM。您可以通过两种方式解决此问题。

在script

iframe

将事件侦听器附加到在DOM准备好时触发代码的文档。

document.addEventListener('DOMContentLoaded', function (event) {
    document.getElementById('main').addEventListener('load', function() {
        console.log('The `iframe` has loaded!')
    })
})

<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>

iframe元素本身返回null？

1 个答案: