如何动态加载html文件并在其中执行外部js

Posted 2023-03-16

技术标签:

【中文标题】如何动态加载html文件并在其中执行外部js【英文标题】：How to dynamic load html file and execute the exernal js in it 【发布时间】：2017-04-26 09:38:04 【问题描述】：

我有一个 html 文件：index.html，其中包含一些基本的 js 库。而且我还有一些模块：

a.html:

<div id='a'>
  <script src="a1.js"></script>
  <script src="a2.js"></script>
</div>

a1.js：

console.log('a1')

a2.js：

console.log('a2')

如何将a.html动态加载到index.html中并获取a1.js和a2.js执行完毕的事件？

【问题讨论】：

查看此answer，如果它有助于投票。 【参考方案1】：

使用w3data.js 来做到这一点（w3data.js）

示例： in index.html

<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="a.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

【讨论】：

但是，我怎样才能让a1.js和a2.js完成的事件被执行呢？因为这包括你的 a.html 文件，所以这也会执行你的 a1.js 和 a2.js 文件我阅读了w3data.js的源代码，发现它使用innerHTML来附加外部html文件：a.html。我知道它会加载 a1.js 和 a2.js 并执行它们，但我想捕获 a1.js 和 a2.js 立即执行的事件。有可能吗？要捕获 a1 的事件，您必须在 a1.js 中的 console.log('a1') 之前或之后编写一些代码。在 a2.js 中相同我有一个想法，我可以使用 AJAX 来获取 a.html 的内容，使用正则表达式来获取所有

以上是关于如何动态加载html文件并在其中执行外部js的主要内容，如果未能解决你的问题，请参考以下文章