鸿蒙开发者社区

WOT技术大会

AIGC创新中国行

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 2024年软考 PMP项目管理软考资讯

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO题库小程序

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

通过webView修改iframe的URL

通过webView修改iframe的URL

HarmonyOS

2024-05-20 20:54:04

浏览

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

赞

收藏 0

回答 1

待解决

回答 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"]); 
        }) 
    } 
  } 
}

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>

实现效果：

回复

2024-05-21 16:32:41

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

发布

相关问题

鸿蒙Webview加载Url，alipay无法返回

7754浏览 • 1回复待解决

WebView支持获取当前页面url吗？

450浏览 • 1回复待解决

webview加载url不支持loacalstorage.setItem/getItem的问题。

451浏览 • 1回复待解决

webview某些url加载空白,链接本身没问题咋回事？

1153浏览 • 1回复待解决

是否支持iframe下载文件？

357浏览 • 1回复待解决

webview加载url后页面一片空白，无报错

870浏览 • 1回复待解决

如何通过代码随意修改锁屏图片?

4017浏览 • 1回复待解决

javaUI 中webview通过布局创建实例失败

4148浏览 • 1回复待解决

使用WebviewController.loadUrl时，由于url是编码过的，是否有url解码的api？

479浏览 • 1回复待解决

k8s 中如何通过 etcdctl 命令修改 etcd 成员的配置

1371浏览 • 1回复待解决

对指定url的图片进行下载保存

424浏览 • 1回复待解决

是否支持通过WebView跑H5 WebRTC进行音视频通话？

421浏览 • 1回复待解决

nginx中url带参数问题有懂的吗？

818浏览 • 1回复待解决

富文本扩展点击监听返回url

375浏览 • 1回复待解决

如何处理应用存在的URL硬编码？

308浏览 • 1回复待解决

是否能够自定义router跳转的url

500浏览 • 1回复待解决

如何给页面URL附加HTTP请求头

905浏览 • 1回复待解决

WebView支持设置WebView圆角吗？

408浏览 • 1回复待解决

基于webView的嵌套滚动

129浏览 • 1回复待解决

鸿蒙端云一体化云函数使用postman调用，url为中国地区的前缀加上触发的URL调用报404 text

827浏览 • 0回复待解决

如何修改应用的icon图标

582浏览 • 1回复待解决

数据库连接url后缀太长了

1822浏览 • 1回复待解决

鸿蒙对webview的加载优化

291浏览 • 1回复待解决

WebView shouldOverrideUrlLoading

385浏览 • 1回复待解决

打包时修改字节码,是否有在打包时，进行字节码修改的技术方案

427浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

鸿蒙开源组件——通过定义url来进行跳转的组件库 0回复

HarmonyOS API：@ohos.url (URL字符串解析) 0回复

WebView 中的图片不能被加载 0回复

短链系统设计(design tiny url) 0回复

WebView与js交互总结 0回复

Copyright © 2005-2024 51CTO.COM 京ICP证060544版权所有未经许可请勿转载