如何从另一个html文件调用一个html文件中的函数答案

【问题标题】：How to call a function in an html file from another html file如何从另一个html文件调用一个html文件中的函数
【发布时间】：2019-08-01 11:25:04
【问题描述】：

我正在尝试从我的 html：tasks-div-upload.html 调用一个函数到我的另一个 html：task-taras-actualizadas.html。

我将我的脚本包含在 html 文件的脚本标签中

我尝试这样调用函数

首先这是调用函数的html：tasks-divs-upload.html

函数在task-taras-actualizadas.html中

我尝试像在 java 中那样调用函数

先写类，再写函数，例如：people.countPeople(5);

在这种情况下，没有类，因为它是一个 html 文件，我该怎么办？

//tasks-divs-upload.html

 function contadorTareas(){
   for(var x = 0; x < divs; x++){
     var numeroTareas = x;
   }
   prueba(numeroTareas);    // <---------
 } 

//task-tareas-actualizadas.html

function prueba(numero){
  console.log(numero);
}

控制台显示此错误“Uncaught ReferenceError: prueba is not defined”

【问题讨论】：

把你的js函数放到单独的js文件中。并使用
这里的“to my other htm”是指 FROM 而不是“to”？
假设 divs 是一个整数，您的循环也可以更改为prueba(divs);。您需要发布更多代码并解释此处的实际目标

标签： javascript function methods

【解决方案1】：

这可以做到，但主要是一个坏主意，不是很常见，并且有一些特定的要求。除非用户知道交互，否则最好不要这样做。

如果您的task-tareas-actualizadas.html 在新窗口中打开tasks-divs-upload.html，则tasks-divs-upload.html 可以调用window.opener.prueba() 但是，如果第一个窗口关闭，它将不存在并且它们必须是同一来源。

如果父窗口保持对子窗口的引用，这种交互也可以采用另一种方式。

最好创建一个 JavaScript 文件，比如“myfunctions.js”，其中包含您希望使用的功能并将其包含在两个页面中，除非出于某种原因您需要/希望页面进行交互 - 例如子页面更改父页面DOM 之类的。

参考https://developer.mozilla.org/en-US/docs/Web/API/Window/opener 和https://developer.mozilla.org/en-US/docs/Web/API/Window/open

【讨论】：

【解决方案2】：

HTML 中的脚本是 JavaScript 代码。它们需要在单独的 .js 文件中定义，或者使用 <script> 标签包含在 html 中。

不可能在一个 html 文件中定义一个 JavaScript 函数，然后在另一个 html 文件中使用它。您需要将函数定义为一个单独的 JavaScript 文件，然后将该文件包含在 html 页面中。

您也可以使用现代浏览器原生支持的JavaScript modules。

【讨论】：

这里不严格，可以在有限的情况下完成