通过webView修改iframe的URL

HarmonyOS

济南二狗子

2024-05-20 20:54:04

1185浏览

已于2024-5-21 16:55:56修改

回答 1

按赞同

按时间

油炸帕尼尼

使用web组件加载一个html，通过webview打开使用iframe的网页,在加载iframe时传入参数确保加载的页面是正确的，使用web的JavaScriptProxy将参数从应用侧传到html中，并在iframe中加上这个参数。

核心代码解释：

import web_webview from '@ohos.web.webview' 
class testObj { 
  constructor() {} 
  test(src:string): string { 
    console.log('Web Component str' + src); 
    src="param=value" 
    return src; 
  } 
  toString(): void { 
    console.log('Web Component toString'); 
  } 
} 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  @State param:string='?param=value' 
  @State testObjtest: testObj = new testObj(); 
  aboutToAppear() { 
    web_webview.WebviewController.setWebDebuggingAccess(true);} 
  build() { 
    Column() { 
      Web({ src: $rawfile('t1.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .onControllerAttached(()=>{ 
          this.controller.registerJavaScriptProxy(this.testObjtest, "objName", ["test", "toString"]); 
        }) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

html：

// t1.html 
<!DOCTYPE html> 
<html> 
  <body> 
    <h2>主页面</h2> 
    <iframe id="iframe" src="" width="500" height="400"></iframe> 
    <script type="text/javascript"> 
      console.log("objName.test result:"); 
      let str = objName.test(); 
      document.getElementById("iframe").src = "t2.html?" + str; 
      console.log("objName.test result:" + str); 
    </script> 
  </body> 
</html>
// t2.html 
<!DOCTYPE html> 
<html> 
  <body> 
    <h2>被嵌入的页面</h2> 
    <script> 
      var urlParams = new URLSearchParams(window.location.search); 
      var myParam = urlParams.get("param"); 
      console.log(myParam); 
    </script> 
  </body> 
</html>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.