仅当用户单击 [重复] 时如何执行 JS 文件

Posted 2023-02-16

【中文标题】仅当用户单击 [重复] 时如何执行 JS 文件

【英文标题】：How to execute JS file only when user click [duplicate]

【发布时间】：2021-04-22 12:06:03

【问题描述】：

Google Places javascript 文件位于我的页脚中（如下所示）。 我试图在用户单击页面之前不加载此 JS 文件，或者更好地单击特定的 div (class= .searchbox2)。基本上，在用户点击页面之前不要加载 Google JS。 谢谢！

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false&libraries=places&region=AU&language=en&key=xxxxxxxxxx"></script> 

【参考方案1】：

对于这样的事情，我推荐Filament Group 的loadJS。您可以按如下方式使用它：

// assuming loadJS is included on the page

const searchBox = document.querySelector('.searchbox2');
const mapsApi = 'https://maps.googleapis.com/maps/api/js' +
  '?v=3.exp&signed_in=false&libraries=places' + 
  '&region=AU&language=en&key=xxxxxxxxxx';

searchBox.addEventListener('click', function () 
  loadJS(mapsApi, function () 
    // any code here will run once the Maps API script has loaded
  );
);

【讨论】：

您能详细说明一下吗？

不需要添加库以将脚本附加到 DOM。

@wuerfelfreak 我添加了一个示例。 :-) @sbolel 我不会将 loadJS 归类为库而是函数。

上面的代码试过了，还是不行。