如何调用inner.html内部的函数

Question

这是我在JS文件中的正常函数。我需要document.getElementById("addToHomeScreenPrompt").innerHTML内部定义的closeHomeScreenPopup函数。如您所见，我已将onclick作为字符串传递。

export default function register() {
// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
function closeHomeScreenPopup() {
console.log("jkjilkjlkjlkjlkjlkjlk");
}
document.getElementById("addToHomeScreenPrompt").innerHTML =
'<div onclick="closeHomeScreenPopup()"><span class="plush--sign">+</span><p>Install the webapp on your iPhone:tap <img style="width: 20px; margin: 0 4px;" alt="" src="img/share_icon.png"/> and then Add to homescreen.</p></div>';
}
}

但我在div上执行onclick时出错

Uncaught ReferenceError: closeHomeScreenPopup is not defined
at HTMLDivElement.onclick (temperature-schedule?roomId=2:51)

如何从inner.html内部调用closeHomeScreenPopup

Answer 1

JS中的所有内容都绑定到包含范围。因此，如果您直接在寄存器函数中定义函数，它将不会绑定到窗口对象。

closeHomeScreenPopup函数应全局定义

window[closeHomeScreenPopup] = function() {
console.log("jkjilkjlkjlkjlkjlkjlk");
}

function closeHomeScreenPopup() {
console.log("jkjilkjlkjlkjlkjlkjlk");
}
document.getElementById("addToHomeScreenPrompt").innerHTML =
'<div onclick="closeHomeScreenPopup()"><span class="plush--sign">+</span><p>Install the webapp on your iPhone:tap <img style="width: 20px; margin: 0 4px;" alt="" src="img/share_icon.png"/> and then Add to homescreen.</p></div>';

<div id="addToHomeScreenPrompt"></div>