尝试在 iframe 中编辑 dom 元素时出现“(variablename) is null”

Question

我不知道 jQuery，我正在尝试仅使用 ECMAScript (ES6)，我在 W3Schools 上找到了一种在 [=] 中编辑 DOM 元素的方法12=]

我的代码完全一样：

let iframe = document.getElementById("music");
let elmnt = iframe.contentWindow.document.getElementById("player");
elmnt.play();

我有一个带有 id="music" 的 iframe 标签和一个带有 id="player" 的音频标签。代码应该在页面加载时播放音频源，它可以工作，但我仍然在控制台中收到错误消息，我无法使用 ES6 与音量交互。

但我得到："TypeError: elmnt is null (sketch: line 29)"

举个例子：https://codepen.io/mark_karrica_/pen/zgxyVL

（我正在使用 p5.js 库，但我认为问题与此无关）

Answer 1

您的代码运行ning 在 iframe 完成加载之前。您可以通过在框架加载后将代码设置为运行来防止这种情况。 iframe 元素有一个 load 事件，您可以将事件处理程序附加到该事件。

<iframe id="myframe" src="..." onload="iframeLoaded()"></iframe>

在这里，我已将事件处理程序 iframeLoaded 附加到框架的 load 事件。然后，您将代码粘贴到该方法中：

function iframeLoaded() {
    let iframe = document.getElementById("music");
    let elmnt = iframe.contentWindow.document.getElementById("player");
    elmnt.play();
}

尝试在 iframe 中编辑 dom 元素时出现“(variablename) is null”

I get "(variablename) is null" when trying to edit dom elements inside an iframe

html

javascript

dom

ecmascript-6

p5.js