Web加载的H5页面跳转后，如何避免原有页面注册的资源被清空

HarmonyOS

zxjiu

2024-03-17 17:51:27

浏览

回答 1

待解决

回答 1

按赞同

按时间

cbaby

使用runJavaScript加载JS可能会出现跳转后注册资源被清空的情况，使用javaScriptOnDocumentStart注入JS就不会出现H5跳转注册资源被清空的情况。

使用runJavaScript复现问题代码参考：

原生页面：

两个Button使用runJavaScript注册并调用test()方法和bodyOnLoadLocalStorage()，两个方法分别实现了为sessionStorage设置值和根据sessionStorage刷新H5页面。

import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct Index { 
  controller: webview.WebviewController = new webview.WebviewController() 
  build() { 
    Column({ space: 20 }) { 
      Button('调用注册资源') 
        .onClick(e => { 
          try { 
            this.controller.runJavaScript( 
              'test()', 
              (error, result) => { 
                if (error) { 
                  console.error(`run JavaScript error, ErrorCode: ${error.code},  Message: ${error.message}`); 
                  return; 
                } 
                if (result) { 
                  console.info(`The test() return value is: ${result}`) 
                } 
              }); 
          } catch (error) { 
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`); 
          } 
        }) 
      Button('调用注册资源') 
        .onClick(e => { 
          try { 
            this.controller.runJavaScript( 
              'bodyOnLoadLocalStorage()', 
              (error, result) => { 
                if (error) { 
                  console.error(`run JavaScript error, ErrorCode: ${error.code},  Message: ${error.message}`); 
                  return; 
                } 
                if (result) { 
                  console.info(`The bodyOnLoadLocalStorage() return value is: ${result}`) 
                } 
              }); 
          } catch (error) { 
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`); 
          } 
        }) 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .backgroundColor(Color.Grey) 
        .width('100%') 
        .height('100%') 
    } 
  } 
}

H5侧：

页面一：

index.html声明了test方法和bodyOnLoadLocalStorage方法。

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
</head> 
<body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 
页面一：”Hello world! 
<div id="result"></div> 
<a href="Second.html">点击跳转</a> 
</body> 
<script type="text/javascript"> 
    function bodyOnLoadLocalStorage() { 
      if (typeof(Storage) !== 'undefined') { 
        document.getElementById('result').innerHTML = sessionStorage.getItem('color'); 
      } else { 
        document.getElementById('result').innerHTML = 'Your browser does not support sessionStorage.'; 
      } 
    } 
    function test(){ 
      if (typeof(Storage) !== 'undefined') { 
        sessionStorage.setItem('color', 'Red'); 
      } 
    } 
  </script> 
</html>

页面二：

页面二并不声明上述两个方法，利用之前的注册调用，结果跳转至页面二后不能正确调用，注册资源清空问题复现。

<!-- Second.html --> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body style="font-size: 30px;"> 
页面二：Hello world! 
<div id="result"></div> 
</body> 
<script type="text/javascript"> 
 
</script> 
</html>

使用javaScriptOnDocumentStart解决问题代码参考：

ArkUI侧

通过javaScriptOnDocumentStart的方式将test方法执行。

import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct Index { 
  controller: webview.WebviewController = new webview.WebviewController() 
  private localStorage: string = 
    "if (typeof(Storage) !== 'undefined') {" + 
      "   sessionStorage.setItem('color', 'Red');" + 
      "}"; 
  @State scripts: Array<ScriptItem> = [ 
    { script: this.localStorage, scriptRules: ["*"] } 
  ]; 
  build() { 
    Column({ space: 20 }) { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .backgroundColor(Color.Grey) 
        .javaScriptOnDocumentStart(this.scripts) 
        .width('100%') 
        .height('100%') 
    } 
  } 
}

H5侧：

页面一：

页面一会调用bodyOnLoadLocalStorage刷新H5页面。

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
</head> 
<body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 
页面一：”Hello world! 
<div id="result"></div> 
<a href="Second.html">点击跳转</a> 
</body> 
<script type="text/javascript"> 
    function bodyOnLoadLocalStorage() { 
      if (typeof(Storage) !== 'undefined') { 
        document.getElementById('result').innerHTML = sessionStorage.getItem('color'); 
      } else { 
        document.getElementById('result').innerHTML = 'Your browser does not support sessionStorage.'; 
      } 
    } 
  </script> 
</html>

页面二：

点击跳转后test方法依旧会调用并生效。

<!-- Second.html --> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> 
页面二：Hello world! 
<div id="result"></div> 
</body> 
<script type="text/javascript"> 
    function bodyOnLoadLocalStorage() { 
      if (typeof(Storage) !== 'undefined') { 
        document.getElementById('result').innerHTML = sessionStorage.getItem('color'); 
      } else { 
        document.getElementById('result').innerHTML = 'Your browser does not support sessionStorage.'; 
      } 
    } 
  </script> 
</html>

2024-03-18 21:34:12

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

Web加载的H5页面跳转后，如何避免原有页面注册的资源被清空

订阅鸿蒙技术特刊，精选内容抢先看