首页 > 其他分享 >SwiftUI 中Webview与JS交互

SwiftUI 中Webview与JS交互

时间:2023-12-28 19:44:36浏览次数:21  
标签:web name request JS window SwiftUI Webview message

iOS中WKWebview原生与网页端JS交互常用的方法是

首先在web view中注入标定好的方法名,例如标定一个request方法

let config = WKWebViewConfiguration()

let userContent = WKUserContentController();

   var dealMessage = DealMessage()

userContent.add(dealMessage, name: "request");

config.userContentController = userContent;

DealMessage类实现代理回掉方法

class DealMessage:NSObject,WKScriptMessageHandler{
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("接收到消息:\(message.body)")
        guard let web = message.webView else {
            return
        }
        if message.name == "request" {
            print("接收到消息request:\(message.body)")
        }else if message.name ==  "gotoshop" {
            web.evaluateJavaScript("gotoshopDetail()")
        }
    }
}

web端 JS调用swif

//js与原生交互
  const para = {
    params: {
      innerHeight: window.innerHeight,
      screnHeight: window.screen.height,
      safeAreaHeightValue: safeAreaHeightValue,
      top: topSafeAreaHeight,
      bottom: bottomSafeAreaHeight,
    },
  }
  const body = JSON.stringify(para)
  window.webkit.messageHandlers.request.postMessage(body)

Swift调JS就简单了

 web.evaluateJavaScript("gotoshopDetail()")

 web端提供IOS调用的方法

window.gotoshopDetail = () => {
  router.push({
    name: 'shop',
    params: {
      id: props.data.id,
    },
  })
}

 

标签:web,name,request,JS,window,SwiftUI,Webview,message
From: https://www.cnblogs.com/duzhaoquan/p/17933421.html

相关文章

  • 前端那些好用的CSS/JS网站
    ......
  • 在nodejs环境里使用canvas和sharp生成图片
    1.安装依赖包npminstalljsdomcanvas2.实例代码const{JSDOM}=require('jsdom');const{createCanvas}=require('canvas');//创建一个虚拟DOM环境constdom=newJSDOM('<!DOCTYPEhtml><html><head></head><body>&......
  • phantomjs selenium 如何动态修改代理?
    在使用PhantomJS和Selenium进行网页爬取时,动态修改代理可以通过使用Selenium的WebDriver的service_args参数来实现。以下是一个基本的示例,演示了如何在PhantomJS中动态修改代理:fromseleniumimportwebdriver#设置PhantomJS的可执行文件路径phantomjs_path='/......
  • vuejs+echarts实现时间轴
    1、效果图2、具体需求描述①可以设置时间轴起始值;②时间轴可以缩放、左右拖动;③鼠标移入时间轴显示当前刻度信息;④点击时间轴时添加蓝色图标,鼠标移入图标显示此时图标信息且隐藏刻度信息,按住图标可以拖动图标;3、实现①结构代码<divid="timeAxisEchart"style="width:10......
  • vuejs+echarts实现x轴为时间轴且数据区域可缩放
    1、效果图2、具体功能描述①选择的时间为时间轴的开始和结束时间;②鼠标可以左右拖动x轴时间轴;③鼠标放入图表中可以缩放数据,x轴会相应的更改当前坐标轴间隔值,最小间隔值为1分钟,最大间隔值为1年,且在缩放时可以获取到数据窗口范围的起始数值;④点击y轴名称会对相应数据显示隐......
  • 低调使用,强到让大厂害怕的安卓软件(autojs6)
    安卓手机自动化工具,之前我是用adb,需要用电脑,如何不用电脑而直接在手机上做自动化呢?autojs6就是办法之一(需要会一点js),借助安卓的无障碍服务来实现。参考https://baijiahao.baidu.com/s?id=1772264265502890324&wfr=spider&for=pc由于auto.js不再开源,所以将目标选定在Autox.js和......
  • js 单例模式
    import{EventEmitter}from'eventemitter3';classH5SSEextendsEventEmitter{staticinstance:H5SSE;staticgetInstance(){if(!H5SSE.instance){H5SSE.instance=newH5SSE();}returnH5SSE......
  • YOLOv5:将模型预测结果保存为Labelme格式的Json文件
    YOLOv5:将模型预测结果保存为Labelme格式的Json文件前言前提条件相关介绍实验环境YOLOv5:将模型预测结果保存为Labelme格式的Json文件代码实现进行预测输出结果前言由于本人水平有限,难免出现错漏,敬请批评改正。更多精彩内容,可点击进入Python日常小操作专栏、OpenCV-Python小应用专......
  • SpringBoot+JaywayJsonPath实现Json数据的DSL(按照指定节点表达式解析json获取指定数
    场景若依前后端分离版手把手教你本地搭建环境并运行项目:若依前后端分离版手把手教你本地搭建环境并运行项目_前后端分离项目本地运行在上面搭建SpringBoot项目的基础上,并且在项目中引入fastjson、hutool等所需依赖后。JaywayJsonPath:GitHub-json-path/JsonPath:JavaJsonPathi......
  • Sublime Text Html CSS JS 代码整理美化插件
    原文地址:SublimeTextHtmlCSSJS代码整理美化插件使用代码编辑编辑器的好处就是有很多功能可以用,特别是一个就是代码整理优化。在编写代码时,我们经常会遇到代码混乱、缩进不正确或格式不统一等问题。这些问题可能会导致代码难以阅读、维护和调试,降低开发效率。那么我这里说一......