如何跨html调用js函数

如何跨HTML调用JS函数

（图片来源网络，侵删）

在Web开发中，我们经常需要在不同的HTML文件中调用相同的JavaScript函数，为了实现这一目标，我们可以采用以下几种方法：

1. 外部JavaScript文件

将JavaScript代码放入一个单独的文件中，然后在HTML文件中引用该文件，这样，你可以在多个HTML文件中使用相同的JavaScript函数。

步骤：

1、创建一个JavaScript文件（functions.js）。

2、在HTML文件中使用<script>标签引用该文件：

<script src="functions.js"></script>

3、在functions.js文件中编写你的JavaScript函数。

2. HTML模板

如果你使用的是前端框架（如React、Vue或Angular），你可以将JavaScript函数封装在一个组件中，并在其他组件中引用该组件。

步骤：

1、创建一个包含JavaScript函数的组件（MyComponent.js）。

2、在其他组件中引用MyComponent组件。

3. 内联JavaScript

将JavaScript函数直接放在HTML文件的<script>标签中，这种方法适用于较小的项目或临时需求。

步骤：

1、在HTML文件中添加<script>标签。

2、在<script>标签中编写JavaScript函数。

4. 动态加载JavaScript

使用JavaScript动态加载其他JavaScript文件，这种方法适用于按需加载或懒加载场景。

步骤：

1、创建一个JavaScript文件（functions.js）。

2、使用JavaScript动态加载该文件：

function loadScript(url) {
  const script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}
loadScript('functions.js');

跨HTML调用JS函数的方法有很多，可以根据项目需求和场景选择合适的方法。