首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS:使用SwiftUI在Webview中调用带两个参数的JS函数

在iOS开发中,使用SwiftUI在Webview中调用带两个参数的JS函数可以通过以下步骤实现:

  1. 首先,创建一个SwiftUI视图,并在其中嵌入一个Webview。可以使用WKWebView来实现Webview功能。
代码语言:txt
复制
import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.load(URLRequest(url: url))
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}
  1. 在SwiftUI视图中,创建一个@State变量来存储从JS函数返回的结果。
代码语言:txt
复制
struct ContentView: View {
    @State private var result: String = ""
    
    var body: some View {
        VStack {
            WebView(url: URL(string: "https://example.com")!)
                .frame(height: 300)
            
            Text("Result: \(result)")
                .padding()
        }
    }
}
  1. 在Webview加载完成后,使用evaluateJavaScript方法调用JS函数,并将结果存储在@State变量中。
代码语言:txt
复制
struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.load(URLRequest(url: url))
        webView.navigationDelegate = context.coordinator
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, WKNavigationDelegate {
        let parent: WebView
        
        init(_ parent: WebView) {
            self.parent = parent
        }
        
        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            webView.evaluateJavaScript("yourJSFunction('param1', 'param2')") { (result, error) in
                if let result = result as? String {
                    parent.result = result
                }
            }
        }
    }
}

在上述代码中,yourJSFunction是你要调用的JS函数,param1param2是传递给JS函数的两个参数。调用evaluateJavaScript方法后,可以通过闭包获取JS函数的返回结果,并将其存储在@State变量result中。

这样,当Webview加载完成后,JS函数会被调用,并将结果显示在SwiftUI视图中。

请注意,以上代码仅为示例,实际使用时需要根据具体需求进行适当修改。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mwp)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【说站】js函数参数使用

js函数参数使用 说明 1、函数某些值不能固定,我们可以通过参数调用函数时传递不同值。 2、多个参数之间用逗号分隔,形式参数可以看作是无声明变量。...JavaScript,形式参数默认值是undefined。...实例 // 函数形参实参个数匹配 function getsum(num1,num2){ console.log(num1 + num2); } // 1.如果实参个数和形参个数一致,则正常输出结果...getSum(1, 2); // 2.如果实参个数多于形参个数,会取到形参个数 getsum(1, 2, 3); // 3.如果实参个数小于形参个数,多余形参定义为 undefined,最终结果...:1 + undefined = NaN // 形参可以看做是不用声明变量, num2 是一个变量但是没有接受值,结果就是undefined getsum(1); 以上就是js函数参数使用,希望对大家有所帮助

3.2K60

js带有参数函数作为值传入后调用问题

❝小闫语录:你可以菜,但是就这么菜下去是不是有点过分了 ❞ 每天不是写 bug,就是解 bug 路上~更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 1.无参数函数作为参数传入调用...当根据实际情况,函数需要作为参数传入时,一般采用如下方式直接调用即可: function fuc1() { console.log(1); } function fuc2(a) { a();...} fuc2(fuc1); // 1 2.有参数函数作为参数传入调用 一般函数都有参数,那么这种情况如何传参呢?...(a, b) { a(b); } fuc2(fuc1, "欢迎关注微信公众号:全栈技术精选"); 3.有参数函数作为事件方法 现在要将传入函数作为点击事件处理程序,你一定想得是这样: function...❝因为在你写 fuc1("我是小闫同学啊") 时,默认就调用了此函数,都不需要点击。 ❞ 如何才能达到点击时才弹出窗口呢?

8.4K40

JS函数本质,定义、调用,以及函数参数和返回值

,简单直接 除此之外,还有对象构造函数创建方式 var cat=new Object(); 还有JavaScript5新增一种方式 该方式老版本浏览器存在兼容性问题 Object.create...里层可以访问外层函数,外层不能访问里层函数 代码块定义函数: 由于js没有块级作用域,所以依然是处于全局作用域中 都会出现预解析函数被提前声明 if(true){ function fn1...(){ } }else{ var fn2=function fn2(){ } } 对象函数 使用对象.函数名进行调用 var person={ name:"cyy",...+n2; })(); console.log(add(3,4));//全局无法访问到函数内部函数add 方法调用: 对象方法,使用对象.方法名进行调用 var operation={...: 构造函数命名时一般首字母大写 调用时用new+函数名,返回值是一个对象 function Person(){ } var obj=new Person(); js内置构造函数,常见有: Object

17.6K20

【Hybird】274-Hybird App 应用开发 5 个必备知识点复习

: 所要请求服务具体操作 // actionArgs: 请求操作所参数 这五个参数并不是直接传给原生,Cordova JS 端会做以下处理: 为每个请求生成一个唯一标识( callbackId...} 为 value,把这个键值对保存在 JS字典里, successCallback 与 failCallback 这两个参数不需要传给原生,原生返回结果时带上 callbackId,JS 端就可以根据...文件命名为 JSBridge.js, 第2步 JSBridge.call 即为调用 JSBridge.js call 方法,后面带了四个参数; call: function (obj, method...; 这个类有两个功能: 暴露给前端函数动态注册功能。...解析前端信息,调用了 Android 端对应函数,这个示例是: showToast 函数

1.3K30

看完就懂Hybrid框架设计方案

//3 取出数据参数,拿到JS传过来数据 //4 根据指令调用对应native方法,传递数据 } 从调用方式就可以看出, iOS 端不能同步拿到调用接口,天然是异步。...最佳方式 通过以上分析,JS -> Native 当下选择如下通信方式是最合适iOS:推荐使用 MessageHandler + prompt 拦截两个方案并存,同时实现异步和同步调用。...整个过程分为 JS -> Native、Native -> JS 两个阶段,其调用流程如下: Native -> JS 时,涉及到 Webview 调用 JS 全局函数,为了避免暴露过多全局变量,设计时我们只暴露全局唯一对象...,实际业务也较常用,需要两个或多个 Webview 来配合使用。... iOS 可以使用 WKURLSchemeHandler 进行拦截,Native 拦截到地址后,需要解析出文件名(前端 js 、css 等资源通常带了 md5 值,可以唯一标识),然后根据文件名去本地查找

97020

iOSJS与OC互相调用(一)--UIWebView 拦截URL

目前我已知JS 与 OC 交互处理方式: 1.JS 做一次URL跳转,然后OC拦截跳转。...因为就相互调用接口使用非常少啊,就那么三两个,完全没必要使用牛刀啊。 ? UIWebView 拦截URL 我之前就使用是UIWebView + 拦截URL 方式实现JS与OC 交互。...答:便于OC 做拦截处理,减少JS调用一些OC 没有实现方法时,webView 做跳转。...:jsStr]; } 当然,有时候我们JS调用OC 方法时候,也需要传参数到OC ,怎么传呢?...OC调用JS方法 关于将OC 执行结果返回给JS 需要注意是: 如果回调执行JS 方法参数,而参数不是字符串时,不要加单引号,否则可能导致调用JS 方法失败。

3.6K40

来了,iOSJSCore与H5交互

开始之前我们先来一个简单相互通信实例(大图) 1 native主动与WebView通信 2 webview调用native 在说通信之前我们先需要搞明白一个东西:WebView调用Native,native...native通过context进行发消息 1 native 主动发消息给WebView 上文我们拿到了js上下文,就可以直接调用jsfunction啦,例如我们传递网络token [...是给我们函数起了一个js调用function起了个别名,进而兼容转换一线jsfunction与OC函数差异。...但是有一个点需要注意,我们暴露出js调用至少需要一个形参,也就是说,不传递数据也要有一个参数 ② 传递给WebView引用实现协议与函数 这里我们只看一个实现 -(void)popBack:(NSString...最后是一个兼容性彩蛋,也是最坑一点---alert UIAlertiOS 9之后慢慢被禁用,而到了iOS13之后这问题异常严重,然鹅直接js进行alert居然报错,好在是哟办法 这里附上几种和不带输入和提示框

1.2K30

H5如何与原生App通信?

RN容器 react-native开发,从rn 0.37版本开始官方引入了组件,安卓调用原生浏览器,IOS默认调用是UIWebView容器。...m.douyu.com' }} /> WebView组件不要嵌套在或原生点击组件,会造成H5内页面滚动失效 h5向ios客户端发送消息; ios,并没有现成api让js调用native方法,...params=' + encodeURIComponent(obj)然后带上你要传递给ios参数;然后客户端内拦截到指定协议头请求之后就阻止该请求并解析url上参数,执行相应逻辑 H5发起这种特定协议请求方式分两种...这里我们在请求参数中加上了cbName=jsCallClientBack,这个jsCallClientBack为JS调用客户端所定义回调函数,在业务层jsBridge封装,我们传入一个匿名函数作为回调...这种js调用方式与ios一样,使用iframe来调用native方法。 通过webview页面里直接注入原生js代码方式,使用addJavascriptInterface方法来实现。

5.9K20

JSB 原理与实践

WebView 概述 WebView 是移动端一个控件,它为 JS 运行提供了一个沙箱环境。...Native 向 Web 发送消息 Native 向 Web 发送消息基本原理上是 WebView 容器动态地执行一段 JS 脚本,通常情况下是调用一个挂载全局上下文方法。...; } 文本框输入 evaluateByNative(23333),来看一下调用结果: 可以看到 Native 端可以直接调用挂载 window 上全局方法并传入相应函数执行参数,并且函数执行结束后...执行参数挂载全局 callback 方法,AppInfo 作为回调方法参数 因此只要把相应回调方法挂载全局对象上,Native 即可把每次调用响应通过动态执行 JS 方法形式传递到...串联双端通信过程 现在我们已经知道如何实现两端互相发送消息以及执行回调了,但看起来并不好用:首先调用 JSB 时需要在方法名后拼接参数和对应回调函数,其次回调函数还需要一个一个地挂载全局对象上。

1.4K10

JSB 原理与实践

WebView 概述 WebView 是移动端一个控件,它为 JS 运行提供了一个沙箱环境。...Native 向 Web 发送消息 Native 向 Web 发送消息基本原理上是 WebView 容器动态地执行一段 JS 脚本,通常情况下是调用一个挂载全局上下文方法。...; } 文本框输入 evaluateByNative(23333),来看一下调用结果: 可以看到 Native 端可以直接调用挂载 window 上全局方法并传入相应函数执行参数,并且函数执行结束后...执行参数挂载全局 callback 方法,AppInfo 作为回调方法参数 因此只要把相应回调方法挂载全局对象上,Native 即可把每次调用响应通过动态执行 JS 方法形式传递到...串联双端通信过程 现在我们已经知道如何实现两端互相发送消息以及执行回调了,但看起来并不好用:首先调用 JSB 时需要在方法名后拼接参数和对应回调函数,其次回调函数还需要一个一个地挂载全局对象上。

3.2K40

JSB 原理与实践

Native 向 Web 发送消息 Native 向 Web 发送消息基本原理上是 WebView 容器动态地执行一段 JS 脚本,通常情况下是调用一个挂载全局上下文方法。...敏锐同学到这一步其实就已经知道我们日常使用 JSB 时客户端是如何调用前端 JS 代码了,我们刚刚静态 html 文件添加几行 JS 代码: function evaluateByNative(...可以看到 Native 端可以直接调用挂载 window 上全局方法并传入相应函数执行参数,并且函数执行结束后 Native 端可以直接拿到执行成功返回值。...执行参数挂载全局 callback 方法,AppInfo 作为回调方法参数 因此只要把相应回调方法挂载全局对象上,Native 即可把每次调用响应通过动态执行 JS 方法形式传递到...串联双端通信过程 现在我们已经知道如何实现两端互相发送消息以及执行回调了,但看起来并不好用:首先调用 JSB 时需要在方法名后拼接参数和对应回调函数,其次回调函数还需要一个一个地挂载全局对象上。

1.3K30

APP内嵌H5页面JS和APP交互解决方案(可传参、可回调)

前言 项目的快速迭代过程,APP嵌入H5页面已是很常见做法。 一定会有APP和JS交互场景,例如JS唤起APP并携带参数......data=xxx' 存在问题: 有些方案为了规避 url 长度隐患缺陷, iOS 上采用了使用 Ajax 发送同域请求方式,并将参数放到 head 或 body 里。...方法二:使用WebViewJavascriptBridge 本质上,它是通过webview代理拦截scheme,然后注入相应JS。...index.html中使用: 模拟调用登录参数和回调 index.js使用: require('/path/to/bridge.js'); //...引用 WebViewJavascriptBridge WebViewJavascriptBridge详细使用 -简书 iOSJS与OC互相调用(三)--MessageHandler -简书 js

6K10
领券