Drupal块视图执行Javascript函数

Question

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

因此，通过将以下代码粘贴到drupal-create新块中，该脚本在php模式下运行得很好，并且呈现得很好。

   <!-- 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>

现在，将其加载到块模块的最佳实践是什么，是hookinit还是hookblockview，或者两者都是，请给出示例和解释。

非常感谢。

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"文件夹中（includes的缩写）

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

希望这能帮助