Question

我有一个博客博客的外部JS文件，是否可以使async属性仅在桌面版本上加载时才起作用，如果是移动版本，只加载普通脚本而不是异步？

<script async="async" src='example.js' type='text/javascript'>

</script>

更新：

我尝试使用if cond ..它似乎有效，但是我可以只调用一次并且没有写两次脚本源链接吗？

这是代码

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
   <script src='example.js' type='text/javascript'></script>
<b:else/>
   <script async="async" src='example.js' type='text/javascript'></script>
</b:if>

Answer 1

正如评论所说，这个应该在服务器端处理，但如果除了在客户端实现它之外别无选择，那么它是可能的：

<head>
  <script>
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(navigator.userAgent);
    const script = document.head.appendChild(document.createElement('script'))
    if (!isMobile) script.async = 'async';
    script.src = '/example.js';
  </script>
</head>

尽管如此，使用async或defer通常是个好主意，以避免在脚本执行时阻止文档解析。

Answer 2

您可以使用b:attr标记执行此操作，如下所示

<script src='example.js' type='text/javascript'>
    <b:attr name='async' value='async' cond='!data:blog.isMobileRequest'/>
</script>

仅在桌面版本上使js代码异步

2 个答案: