尝试在 iframe 中编辑 dom 元素时出现“（变量名）为空”

Question

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

我的代码一模一样：

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

您的代码在 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();
}