iframe 元素本身返回 null？答案

【问题标题】：iframe Element itself returns null?iframe 元素本身返回 null？
【发布时间】：2016-12-09 09:26:52
【问题描述】：

我的谷歌浏览器坚持认为我的 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");
    });
}

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

【问题讨论】：

取决于脚本何时运行，在 iframe 元素出现在文档中之前还是之后
改用document.getElementById("main").addEventListener("load", function() {
仅供参考，在加载正文时调用 start() 函数。
您能否发布运行start 的代码，以便我们了解更多上下文？
使iframe = document.getElementById("main"); 的第一行start() 被设置为脚本加载，而不是页面加载。

标签： javascript html dom iframe

【解决方案1】：

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

将script 放在iframe 之后
将事件侦听器附加到文档，当 DOM 准备好时触发您的代码。

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

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

【讨论】：

即使有这个示例代码？你用的是什么浏览器？
Chrome，最新版本。