鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

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

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
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

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

发布

相关问题

关于HarmonyOS webview中iFrame的使用问题

126浏览 • 1回复待解决

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

738浏览 • 1回复待解决

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

9116浏览 • 1回复待解决

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

913浏览 • 1回复待解决

flutter webview插件，拦截不到非用户点击跳转的URL

57浏览 • 1回复待解决

Swiper中使用WebView，拦截url使用navigation方式跳转，返回后webview白屏

160浏览 • 1回复待解决

H5通过url scheme拉起对应应用

436浏览 • 1回复待解决

如何通过fetchCookieSync获取Web隐私模式下指定url对应cookie的值

314浏览 • 1回复待解决

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

5397浏览 • 1回复待解决

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

2619浏览 • 1回复待解决

是否支持iframe下载文件？

731浏览 • 1回复待解决

HarmonyOS web iframe 注入.js 问题

382浏览 • 1回复待解决

使用HarmonyOS组件webview加载网页的时候，js使用的select标签，webview容器支持修改样式以及选中状态吗？

131浏览 • 1回复待解决

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

2486浏览 • 1回复待解决

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

5514浏览 • 1回复待解决

webview组件通过control getBackForwardEntries获取的历史记录不对

134浏览 • 1回复待解决

Image组件通过什么方式能修改加载的png格式的图片颜色

211浏览 • 1回复待解决

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

1931浏览 • 1回复待解决

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

2453浏览 • 1回复待解决

iframe标签 src内部访问top跨域问题

171浏览 • 1回复待解决

request.downloadFile的url兼容处理

173浏览 • 1回复待解决

HarmonyOS web组件的prepareForPageLoad加速url是否受url中的参数影响？

166浏览 • 1回复待解决

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

977浏览 • 1回复待解决

ionic框架的H5是否可以通过HarmonyOS的webView组件正常的加载出来？

199浏览 • 1回复待解决

如何通过IDE删除/修改设备或模拟器沙盒目录文件

240浏览 • 1回复待解决

提问

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

相关讨论帖

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

H5通过url scheme拉起对应应用 0回复

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

基于webview的Picker拉起 0回复

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

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