php wp_script_add_data不适用于异步延迟

i2byvkas 于 2023-08-02 发布在 PHP

关注(0)|答案(2)|浏览(118)

我目前正在尝试让async和defer与wp_script_add_data一起工作。我偶然发现了下面这篇文章来完成这个任务。How to add defer or async attribute to wp_add_inline_script?但是，当我传递wp_script_add_data时，它并没有向脚本添加任何内容。

的数据
代码如下：

// Register/Enqueue the script source if it is configured
    if (array_key_exists('path', $s)) {
      // Replace constant tags with real constants
      $s['path'] = self::localize($s['path'], $s['localize']);
      $src = self::scriptArgs($s['handle'], $s['path'], $s['in_footer']);

      wp_register_script(...$src);
      wp_enqueue_script(...$src);

      // // If set add async to script
      if ($s['async'] === true) {
        $t = $s['handle'];
        $t .= '-inline';
        // var_dump($src);
        wp_script_add_data('rollbar' , 'async/defer', true );
      }

      // Add inline script to source script if it exists
       if (array_key_exists('inline', $s)) {
         $s['inline']['contents'] = self::getFileContents($s['inline']['path'], $s['localize']);
         wp_add_inline_script($s['handle'], $s['inline']['contents'], $s['inline']['position']);
       }
    }

字符串
我将async/defer传递给wp_script_add_data adter wp_enque_script，但脚本没有添加async defer。我如何才能使此工作？
当我添加'conditional'，'lt IE 9'它的作品：

的

php

来源：https://stackoverflow.com/questions/64916756/wp-script-add-data-not-working-for-async-defer

2条答案

按热度按时间

lf3rwulv1#

为了让wp_script_add_data与defer配合使用，我定义了如下自定义过滤器：这很有效。：）

add_filter('script_loader_tag', function ($tag, $handle){
  foreach (['async', 'defer'] as $attr) {
    if (!wp_scripts()->get_data($handle, $attr)) {
      continue;
    }
    // Prevent adding attribute when already added in #12009.
    if (!preg_match(":\s$attr(=|>|\s):", $tag)) {
        $tag = preg_replace(':(?=></script>):', " $attr", $tag, 1);
    }
    // Only allow async or defer, not both.
    break;
  }
  return $tag;
}, 10, 2);

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script(
    'rare-candy-assets',
    get_template_directory_uri() . '/dist/assets/main.js',
    [],
    filemtime(get_template_directory() . '/dist/assets/main.js'),
    true
  );
  wp_script_add_data('rare-candy-assets', 'defer', true);
});

字符串

赞(0）回复(0）举报 2023-08-02

1qczuiv02#

我知道这不是您希望的答案，但是async或defer只有在存在src属性时才有效。也就是说，它不适用于内联脚本。
关于MDN docs：
defer设置此布尔属性是为了向浏览器指示脚本将在文档解析之后但在触发DOMContentLoaded之前执行。具有defer属性的脚本将阻止DOMContentLoaded事件触发，直到脚本加载并完成计算。警告：如果src属性不存在（即对于内联脚本），在这种情况下它将没有任何效果。defer属性对模块脚本没有影响-默认情况下它们会延迟。具有defer属性的脚本将按照它们在文档中出现的顺序执行。此属性允许消除解析器阻塞JavaScript，在这种情况下，浏览器必须在继续解析之前加载和评估脚本。async在这种情况下具有类似的效果。

赞(0）回复(0）举报 2023-08-02

我来回答

php wp_script_add_data不适用于异步延迟

2条答案

相关问题

热门标签

最新问答