Drupal Block View 执行 Javascript 函数

Question

这将是我创建的第一个自定义模块，并且有一些白发用于像将 js 函数渲染到 drupal 块模块这样简单的事情。

所以脚本在 php 模式下工作正常，只需将以下代码粘贴到 drupal create new block 中，它就可以正常渲染。

   <!-- Include my.js  -->
    <script src="https://1.2.3.4/static/my.js"></script>

    <!-- Decide where you want to put my -->
    <div id="my_container" style="position: relative; width: 60em; height: 30em;">
        <div id="my"></div>
    </div>

    <!-- Call my.init() at some point after the page is done loading -->
    <script>
    window.onload = function() {
        // Initialize my:
        my.init({url: 'https://1.2.3.4/'});
    }
    </script>

现在将其加载到块模块中的最佳做法是什么，是 hook_init 还是 hook_block_view 或者两者都存在，请举例说明。

非常感谢。

Answer 1

我同意大多数或给出的答案，但我想指出一个潜在的错误。

问题是在启用块缓存后在 hook_block_view 中使用 drupal_add_js。

更具体地说，一旦块被缓存，您的 js 将不会使用此方法添加。

要解决这个问题，您可以在 hook_block_view 中构建的可渲染数组中使用“#attached”。

查看https://api.drupal.org/comment/28929#comment-28929

Answer 2

我猜这是在 Drupal 7 中。

如果您需要快速入门...

如何组织模块的示例。让我们称您的模块为“mymodule”。

[在 mymodule 文件夹内]

mymodule.info mymodule.module --js/ --inc/

将所有与您的模块特别相关的 javascript 放在“js”文件夹中 将所有与您的模块特别相关的 PHP 文件放在“inc”文件夹中（include 的缩写）

1) 使用hook_block_view()

//Within mymodule_block_view()

//Put your content for the block
$block['content']= '<div id="my_container" style="position: relative; width: 60em; height: 30em;">
              <div id="my"></div>
            </div>';

//Later on
return $block;

完整示例请参见https://api.drupal.org/api/drupal/modules%21block%21block.api.php/function/hook_block_view/7。

我会将其拆分为一个单独的文件，然后使用 module_file_include() （请参阅 https://api.drupal.org/api/drupal/includes!module.inc/function/module_load_include/7 ）或将其包装在一个函数中并从 mymodule_block_view() 中调用该函数

2) 在块视图中使用drupal_add_js()

$module_path = drupal_get_path('module', 'mymodule'); //Get path of your module
drupal_add_js($module_path.'/js/[your JS file]', 'file');

此处添加JS的说明及示例：https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7

请注意，只需将<script> 简单地添加到$block['content'] 即可，但是通过使用drupal_add_js()，您可以利用Drupal 的缓存（以及各种缓存模块）来帮助您加快站点速度。如果您只使用<script>，您不会获得任何优势。

3) 一般提示：学习jQuery，比纯javascript容易得多

drupal_add_js("jQuery(document).ready(my.init({url: 'https://1.2.3.4/'}));", 'inline');

部分示例（在您的 hook_block_view 中）：

$module_path = drupal_get_path('module', 'mymodule'); //Get path of your module
drupal_add_js($module_path.'/js/[your JS file]', 'file');
$block['content']= '<div id="my_container" style="position: relative; width: 60em; height: 30em;">
                  <div id="my"></div>
                </div>';

drupal_add_js("jQuery(document).ready(my.init({url: 'https://1.2.3.4/'}));", 'inline');

如上所述，我会将模块代码分成更小（更易于管理）的文件。

例如。

inc/mymodule_menu.inc.php //hook_menu
inc/mymodule_blocks.inc.php //hook_block_view
inc/mymodule_firstblock.inc.php //Code for a block wrapped in a function, which hook_block_view calls

希望对你有帮助