当前位置: 首页 > 知识库问答 >
问题:

前端 - 如何在antd design pro脚手架中向打包后的index.html添加自定义DOM元素?

龚威
2024-06-06

antd design pro 脚手架里,如何设置打包出来的index.html 里面添加其他dom元素呢?

我在 config.ts 文件中 设置了

  headScripts: [    // 解决首次加载时白屏的问题    { src: '/scripts/loading.js', async: true },    { content: `<div id="fileContent" />`, charset: 'utf-8' },  ],

虽然生成的 html 里面包含了 fileContent元素,但是在代码层面还是找不到这个元素呢

<link href="/manifest.json" rel="manifest"><script async="" src="/scripts/loading.js"></script><script charset="utf-8"><div id="fileContent" /></script></head><body><div id="root"></div><script src="/umi.js"></script></body></html>

image.png

共有2个答案

易飞文
2024-06-06

我使用的 umi4,只能通过 config.ts中来配置拼接html,umi4已经废弃了modifyHtml这个功能了。
我在headScripts中添加了一个js,在js中去添加了dom元素
fileShow.js

(function() {  let obj = document.createElement("div");  obj.setAttribute('id', 'fileContent');  document.body.append(obj)})();

config.ts中的配置

headScripts: [    { src: '/scripts/fileShow.js', async: true },  ],
龚玄天
2024-06-06

在antd design pro脚手架中,向打包后的index.html添加自定义DOM元素,你应该直接在public/index.html中手动添加这些元素,而不是通过config.ts文件中的headScripts设置。headScripts主要用于在HTML的<head>部分插入脚本标签,而不是DOM元素。

因此,你应该直接在public/index.html文件中添加你想要的DOM元素,例如:

<!DOCTYPE html><html lang="en"><head>  <!-- ... 其他head内容 ... --></head><body>  <div id="root"></div>  <div id="fileContent"></div> <!-- 在这里添加你的自定义DOM元素 -->  <script src="/umi.js"></script></body></html>

请注意,将DOM元素添加到<body>部分中,而不是<head>部分,因为<head>部分通常用于包含元数据、链接到样式表和脚本,而不是实际的页面内容。

对于你的例子,<div id="fileContent" />应该直接放在<body>标签内,而不是作为<script>标签的内容。<script>标签通常用于包含JavaScript代码,而不是HTML元素。

关于为什么你在代码层面找不到fileContent元素,原因可能是因为你将它添加到了<script>标签中,而实际上你应该将它作为一个独立的DOM元素添加到<body>中。由于它被错误地放置在<script>标签内,浏览器可能不会将其视为一个有效的DOM元素,因此你在JavaScript代码中无法找到它。

确保你按照上述方法直接在public/index.html中添加DOM元素,然后重新构建你的项目,你应该能在生成的index.html文件中看到并且能够通过JavaScript访问这个元素。

 类似资料:
  • 一个具有“姓名”、“地址”和“工资”属性的实体“人” 两个角色-“员工”和“经理” 虽然员工应该能够编辑他自己的地址,但他肯定不能改变他的工资或其他人的地址。虽然他可能被允许看到自己的工资和其他用户的地址,但他甚至不允许看到其他人的工资,更不用说编辑了。另一方面,manager具有完全的readwrite权限。 这在后端不是问题--我们可以在那里使用自定义bean验证来强制执行写权限。 我想收到

  • 我有一个包含数据的表,我想在其中添加一个页脚,以便累加并显示每行中int值的总和。 我尝试了以下代码。 我的表格如下: 我的Vue数据 我现在得到的只是一个反映页眉的页脚。 这是在引导Vue自定义头文档之后编写的,但在细节上非常粗略,没有提供如何添加真正自定义信息的真实信息。我只想我的模板显示在页脚。 编辑:好吧,我确实弄明白了以下几点。还是不是我想要的。 我意识到Bootstrap-Vue设置的

  • 我无法在gradle项目中添加自定义源代码集。如何初始化这里的版本号?我的gradle文件看起来像:

  • 在RestTemplate中,我有一个自定义拦截器,它将记录一些请求-响应详细信息并保存到数据库。 我的自定义拦截器: springboot中的RestTemboard bean配置: 将拦截器添加到restTemboard bean: 如何将此拦截器添加到佯装客户端? 正在应用中。yml: InterceptorOne为假装客户端中的每个请求添加标头: 但是我不能添加日志服务拦截器,因为它由于错

  • 我是Perl 6的新手。我的Atom编辑器中有以下代码,但我仍然不明白这是如何工作的。正如docs.raku.org所说,我复制了以下代码,但似乎不起作用。所以我将代码更改为: 输出为: 我知道它是有效的,但是docs.raku.org中的文档与此有点不同,它在第7行的AT-KEY方法之前没有“自”。有没有更详细的例子?

  • 我正在为Wordpress中的Elementor编辑器开发一个自定义小部件。 我想设置自定义小部件图标,Elementor提供了get_ICON函数,我们必须返回类,该类包含:before伪元素,并在浏览器中呈现。 是否有任何方法可以使用png或任何其他格式将图标更新到Elementor小部件。 甚至我也试着用内容为空和背景图像的类。它不起作用了。 在Elementor中创建自定义小部件的文档:h