最标准的方法是将JavaScript代码提取为独立.js文件并通过引入；其次可用ES模块import语法、fetch动态执行内联脚本、iframe跨文档通信或服务端包含等方式实现复用。
如果您希望在当前HTML文件中使用其他HTML文件中定义的JavaScript代码，则需要通过特定方式将外部HTML文件中的脚本逻辑导入或加载到当前页面。以下是实现此目标的多种方法：
一、使用
该方法要求将原HTML文件中的JavaScript代码提取为独立的.js文件，再通过标签引用。这是最标准、最可靠的方式，适用于所有现代浏览器。
1、打开原始HTML文件，找到标签内的JavaScript代码。
2、新建一个纯文本文件，将JavaScript代码全部复制粘贴进去，保存为common.js（或其他合法文件名），确保编码为UTF-8无BOM。
立即学习“Java免费学习笔记（深入）”；
3、在目标HTML文件的或末尾添加：。
4、确保common.js与目标HTML文件在同一目录下，或正确填写相对/绝对路径。
二、使用import语法动态加载模块化JS代码
该方法适用于已将JavaScript代码重构为ES模块（ESM）格式的情况，支持跨HTML文件复用导出的函数或变量。
1、在原始HTML所含的JS代码中，将需复用的部分封装为函数，并使用export导出，例如：export function initWidget() { ... }。
2、将该JS代码保存为utils.mjs（注意扩展名必须为.mjs或在中使用.js）。
3、在目标HTML中添加：import { initWidget } from './utils.mjs'; initWidget();。
4、注意：此方式要求服务器环境运行，不能直接双击打开HTML文件，否则会触发跨域限制。
三、通过fetch加载HTML片段并执行内联脚本
当无法修改原始HTML结构，且必须从另一个HTML文件中提取并运行其内部标签内容时，可采用异步获取HTML内容并注入执行的方式。
1、使用fetch('./other.html')请求目标HTML文件内容。
2、解析响应文本，用正则或DOMParser提取所有标签的textContent或src属性值。
3、对每个内联脚本，创建新元素，设置textContent，并挂载到document.head或document.body。
4、注意：直接执行内联脚本可能绕过CSP策略，且无法访问原始HTML中定义的全局变量作用域。
四、使用
该方法将其他HTML文件作为子页面嵌入，再通过window.postMessage和contentWindow进行跨文档脚本通信。
1、在目标HTML中插入：。
2、监听iframe的load事件，获取其contentWindow对象。
3、调用iframe.contentWindow.someExportedFunction()（前提是other.html已将函数挂载至window）。
4、注意：两页面必须同源，否则contentWindow访问被浏览器阻止。
五、服务端包含（SSI）或构建时预处理
在服务端环境（如Apache启用SSI、Nginx配合Lua、或使用Vite/Webpack等构建工具）中，可在HTML编译阶段将其他HTML文件中的块直接插入当前文档。
1、在目标HTML中插入SSI指令：（需服务器启用SSI）。
2、若使用Vite，可借助vite-plugin-html插件，在index.html中通过注入内容。
3、构建后生成的HTML将包含原始HTML中所有的脚本逻辑，无需客户端额外加载。
4、注意：此方式不适用于纯静态托管平台（如GitHub Pages默认不支持SSI）。
以上就是html如何引入html的js_引入其他HTML文件中的JavaScript【中的】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605206.html
微信扫一扫 
支付宝扫一扫 
