如何在从WordPress数据库加载的页面上使用(或模仿)Document.getElementByID()?

时间:2018-02-06 作者:tim.rohrer

我正在尝试将javascript函数调用绑定到我正在开发的插件中的特定页面。所有javascript函数和调用都位于IIFE中,一个用于管理端,一个用于公共端。

在管理端,使用include 语句,我可以使用jQuery或document.getElementById() 创建绑定。然而,当我在公共端页面上尝试相同的方法时(我已将其放置在数据库中),一切都不起作用。

在当前表单中,我有代码<body data-bind="PublicInterface"> 在公共页的顶部(在数据库中)。

在Javascript中:

if ( document.body.getAttribute(\'data-bind\') === \'PublicInterface\' ) {
    alert (\'Found it!\');
};
提供的错误为TypeError: document.body is null

我还尝试使用jQuery来实现这一点<div id="home-search" data-bind="PublicInterface"> 在文档中,Javascript是:

if ( $(\'#home-search\').length ) {
    alert (\'Found it!\');
};
这会无声地失败。

由于这两种方法都可以用于管理端,我开始认为问题源于WordPress加载页面的方式。

如果是这种情况,如何将javascript绑定到从WordPress数据库加载的页面?

1 个回复
最合适的回答,由SO网友:tim.rohrer 整理而成

WordPress使用wp_enqueue_script() 注册包含在单独文件中的javascript并将其排队。默认行为是wp_enqueue_script() 是在</body> 标签,显然WordPress页面需要在页脚中加载脚本。正如评论中指出的,装载顺序问题的线索是TypeError 那个document.body 为空。

一旦wp_enqueue_script() $in_footer 选项设置为true, 原始javascript按预期运行,并绑定到页面。此更改仅适用于公共端页,而不适用于管理端页included 进入WordPress。

结束