鸿蒙开发者社区

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 web内嵌iframe，iframe加载时是否可以获取iframe的url

29浏览 • 1回复待解决

关于HarmonyOS webview中iFrame的使用问题

329浏览 • 1回复待解决

HarmonyOS webview加载url白屏

33浏览 • 1回复待解决

#鸿蒙通关秘籍#在Webview中如何通过动态菜单进行URL链接操作？

106浏览 • 1回复待解决

HarmonyOS WebView加载url无法滚动

77浏览 • 1回复待解决

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

9252浏览 • 1回复待解决

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

1059浏览 • 1回复待解决

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

191浏览 • 1回复待解决

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

861浏览 • 1回复待解决

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

312浏览 • 1回复待解决

是否支持iframe下载文件？

806浏览 • 1回复待解决

HarmonyOS web iframe 注入.js 问题

576浏览 • 1回复待解决

HarmonyOS WebView处理SSLError事件时如何获取异常URL

52浏览 • 1回复待解决

HarmonyOS 使用webview加载H5页面时，页面内容包含iframe标签，无法正常显示。

93浏览 • 1回复待解决

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

2762浏览 • 1回复待解决

HarmonyOS webView的onTitleReceive事件，在无title网页加载中返回了url路径

31浏览 • 1回复待解决

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

2755浏览 • 1回复待解决

H5通过url scheme拉起对应应用

568浏览 • 1回复待解决

HarmonyOS Webview加载url发生404的时候，需要定制错误页面，最佳实践是什么？

114浏览 • 1回复待解决

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

5543浏览 • 1回复待解决

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

446浏览 • 1回复待解决

HarmonyOS webview无法通过loadData加载内容

25浏览 • 1回复待解决

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

320浏览 • 1回复待解决

HarmonyOS 如何实现给定一个url，打开一个全新的 webview 页面

102浏览 • 1回复待解决

HarmonyOS webview使用问题：如何拦截url并添加参数，如何添加请求header

129浏览 • 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版权所有未经许可请勿转载