Drupal块视图执行Javascript函数


Drupal Block View Execute Javascript function

这将是我创建的第一个自定义模块,对于将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,或者两者都是,请给出示例和解释。

非常感谢。

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

问题是一旦启用块缓存,就在hook_block_view中使用drupal_add_js。

更具体地说,一旦缓存了块,就不会用这个方法添加js。

要解决此问题,可以在hook_block_view中构建的可渲染数组中使用"#attached"。

结账https://api.drupal.org/comment/28929#comment-28929

我猜这是在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

希望这能帮助