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

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

HarmonyOS
2024-03-17 17:51:27
浏览
收藏 0
回答 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>
分享
微博
QQ
微信
回复
2024-03-18 21:34:12
相关问题
H5页面如何与ArkTS交互
507浏览 • 1回复 待解决
webview加载Vue h5失败
15519浏览 • 5回复 待解决
Web能直接加载h5代码吗?
1152浏览 • 2回复 待解决
如何加载字符串形式H5数据
201浏览 • 1回复 待解决
如何实现H5自定义事件
311浏览 • 1回复 待解决
FA里内嵌H5是怎么保持登录状态?
5102浏览 • 1回复 待解决
ArkTs如何跳转当前应用设置页面
178浏览 • 1回复 待解决
如何跳转到共享包中指定页面
210浏览 • 1回复 待解决
点击服务卡片如何跳转至指定页面
429浏览 • 1回复 待解决
服务卡片如何跳转到指定页面呢?
4092浏览 • 1回复 待解决
页面之间跳转方式怎么设置
4447浏览 • 1回复 待解决
如何实现上下切换页面跳转动画
262浏览 • 0回复 待解决