Javascript 函数未在点击事件上定义，但适用于页面加载？

Question

我在本地机器上设置了一个 Wordpress 站点，我正在其中构建自定义主题。 在 'enqueue-assets.php' 文件中，我使用 wp_enqueue_script 加载主包 javascript 文件。 在该包中是其他 .js 文件的额外导入。 在导入的 .js 文件之一中，有以下函数：

function svgPageJump(target){
    alert(target);
}

我还尝试将函数分配给变量，只是为了确保得到与下面解释的结果相同的结果：

let svgPageJump = function(target){
    alert(target);
};

和

var svgPageJump = function(target){
    alert(target);
};

当我使用 .ready() 在同一个 .js 文件中调用这个函数时：

$(document).ready(function(){
    svgPageJump('section-plan');
});

正如预期的那样，我在页面加载时收到警报。 我也通过在函数声明之后调用它来获得警报（也如预期的那样。）

不幸的是，这不适用于页面上其他地方的点击事件。 最终，我试图在单击 SVG 中的元素时触发这些事件，以创建页面跳转。 在我使用的可点击元素上：

onclick="top.svgPageJump('section-plan');"

单击该元素给我这个错误：

Uncaught TypeError: top.svgPageJump is not a function
    at SVGGElement.onclick

起初我认为这是 SVG 的定位问题，但我对页面其他地方的一些文本进行了另一次测试。 在 Wordpress 页面的古腾堡标题块中，我使用该块的 HTML 编辑器放置了以下标记：

<h2 id="section-plan" onclick="svgPageJump('section-plan');">PLAN</h2>

我也在自定义 HTML 块中执行此操作，但是无论哪种方式，当我单击实际页面上的 h2 时，都会出现此错误：

Uncaught ReferenceError: svgPageJump is not defined
    at HTMLHeadingElement.onclick

我显然遗漏了一些东西（可能是一些简单的东西），但不确定如何在主题文件（否则它们都可以正常工作）或通过 Wordpress 管理员在页面中定义的事件之间跟踪问题，或者...？

关于此的另一个注意事项...我最初使用更简单的方法使用锚标记和关联的 id 使这些页面跳转。 这工作正常，但我在页面上有一个粘性标题，因此当页面滚动时，带有 id 的元素在标题下滚动，因此我尝试使用 JavaScript/jQuery 来说明标题高度。

谢谢！

Answer 1

根据这个问题（如果有一个赞成的答案，我会将其作为副本关闭）：

非模块脚本顶层的var将在window对象上创建一个属性。 使用函数声明也是如此。 您可以通过top从框架访问它。

let不会在window对象上创建属性，因此如果您使用let ，则无法以这种方式访问​​它。