HarmonyOS 鸿蒙Next中web组件使用runJavaScript替换图片不刷新

HarmonyOS 鸿蒙Next中web组件使用runJavaScript替换图片不刷新

PicController: webview.WebviewController = new webview.WebviewController();

Web({
  src: $rawfile('InchPrint.html'),
  controller: this.PicController
})
  .domStorageAccess(true)
  .fileAccess(true)
  .width(ComConst.FULL_PERCENT)
  .layoutWeight(1)

await this.PicController.runJavaScript(`
      let img = new Image();
      img.src = "${this.print.info}";
      img.id = 'printIamge';
      img.onload = function() {
      document.querySelector('.main').innerHTML = "";
      document.querySelector('.main').appendChild(img);
       }`)

this.print.info是base64，为什么第一次可以正常显示，第二次换另一个base64还是第一张的图片


更多关于HarmonyOS 鸿蒙Next中web组件使用runJavaScript替换图片不刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

在 Web 组件中使用 runJavaScript 替换图片时，第二次更换 base64 仍显示第一张图片，核心原因是浏览器对图片资源的缓存机制或base64 字符串未实际更新导致的。

更多关于HarmonyOS 鸿蒙Next中web组件使用runJavaScript替换图片不刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


要避免浏览器对图片资源的缓存机制，可以采用以下几种方法：

  1. 使用版本号或时间戳：在请求图片时添加一个唯一的查询字符串，如 image.jpg?v=1.0.0 或 image.jpg?timestamp=1234567890。这会使得每次请求的URL都不同，从而绕过缓存。

  2. 设置HTTP头部：通过服务器配置或编程方式设置HTTP响应头，如 Cache-Control: no-cache, no-store, must-revalidate 和 Expires: 0，以确保浏览器不会缓存图片。

  3. 更改文件名：每次更新图片时更改其文件名，这样浏览器就会认为这是一个新的资源并重新下载。

  4. 使用Cache-Control指令：设置 Cache-Control: max-age=0 来告诉浏览器不要缓存该资源。

可以试试，替换前，删除旧的，再添加。这样强制更新。

// 移除旧图片
const oldImg = document.getElementById('printImage');
if (oldImg) oldImg.remove();
let img = new Image();
...

这个已经测试过，不行，还是只会显示第一张图片，

在HarmonyOS Next中，Web组件使用runJavaScript执行图片替换后未刷新，可能是WebView缓存导致。解决方法是在JavaScript代码中添加时间戳参数强制刷新，例如：

document.getElementById('imgId').src='newImage.jpg?'+new Date().getTime()

或者调用Web组件的refresh方法强制刷新页面。确保JavaScript代码正确执行且DOM元素存在。

在HarmonyOS Next中使用Web组件的runJavaScript方法替换图片时遇到不刷新的问题，这通常与WebView的缓存机制有关。以下是可能的原因和解决方案：

  1. 缓存问题：
  • WebView默认会缓存资源，导致后续相同的DOM操作可能不会触发重新渲染
  • 解决方案：在替换图片前先清空缓存或强制刷新
  1. 代码优化建议：
await this.PicController.runJavaScript(`
  let img = document.getElementById('printIamge');
  if (!img) {
    img = new Image();
    img.id = 'printIamge';
    document.querySelector('.main').appendChild(img);
  }
  img.src = "${this.print.info}?t=" + Date.now(); // 添加时间戳避免缓存
`);
  1. 其他注意事项：
  • 确保每次调用时this.print.info的值确实已更新
  • 检查是否有其他JavaScript代码在干扰DOM操作
  • 考虑使用Web组件的refresh()方法强制刷新整个WebView

这种方法通过添加时间戳参数来避免浏览器缓存，同时优化了DOM操作逻辑，应该能解决图片不刷新的问题。

回到顶部