开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ios与js交互 demo

在iOS开发中，与JavaScript交互通常是通过WKWebView来实现的。以下是一个简单的iOS与JavaScript交互的示例：

1. 创建一个简单的iOS应用

首先，创建一个新的iOS项目，并确保选择Swift作为编程语言。

2. 添加`WKWebView`

在你的ViewController中添加一个WKWebView。

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "nativeApp")

        webView = WKWebView(frame: self.view.frame, configuration: config)
        self.view.addSubview(webView)

        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {
            webView.loadFileURL(url, allowingReadAccessTo: url)
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeApp", let messageBody = message.body as? String {
            print("Received message from JavaScript: \(messageBody)")
            // 这里可以处理从JavaScript发送过来的消息
        }
    }
}

3. 创建一个HTML文件

在项目的Bundle中添加一个index.html文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript to iOS</title>
    <script type="text/javascript">
        function sendMessageToNativeApp() {
            window.webkit.messageHandlers.nativeApp.postMessage("Hello from JavaScript!");
        }
    </script>
</head>
<body>
    <h1>JavaScript to iOS Communication Demo</h1>
    <button onclick="sendMessageToNativeApp()">Send Message to Native App</button>
</body>
</html>

4. 运行应用

运行你的iOS应用，你应该会看到一个按钮。当你点击按钮时，JavaScript会发送一条消息到iOS应用，iOS应用会在控制台中打印出这条消息。

解释

WKWebView: WKWebView是iOS中用于显示网页内容的视图。
WKWebViewConfiguration: 用于配置WKWebView，包括设置WKUserContentController。
WKUserContentController: 用于管理JavaScript与iOS之间的消息传递。
WKScriptMessageHandler: 这是一个协议，用于处理从JavaScript发送过来的消息。
window.webkit.messageHandlers: 在JavaScript中，通过这个对象可以发送消息到iOS应用。

优势

实时交互: JavaScript和iOS应用可以实时交互，适用于需要动态更新内容的场景。
灵活性: 可以在iOS应用中嵌入复杂的网页内容，并与之交互。
跨平台: 使用标准的Web技术，可以更容易地在不同平台上实现类似的功能。

应用场景

混合应用: 在iOS应用中嵌入网页内容，并实现与原生功能的交互。
动态内容更新: 通过JavaScript动态更新网页内容，而不需要重新加载整个页面。
表单验证: 在客户端进行初步的表单验证，并将结果发送到iOS应用进行进一步处理。

常见问题及解决方法

消息无法传递:
- 确保WKWebViewConfiguration中的userContentController已经添加了消息处理器。
- 确保JavaScript中的window.webkit.messageHandlers名称与iOS中的名称一致。

安全性问题:
- 确保只加载可信的网页内容，避免跨站脚本攻击（XSS）。
- 使用WKWebView的allowsReadAccessTo方法限制JavaScript可以访问的文件路径。

通过以上步骤，你可以实现一个简单的iOS与JavaScript交互的示例。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iOS_WKWebView与JS交互 Demo

-> Void) { print("需验证服务器证书: didReceive challenge") } // MARK: - web内容进程被终止时调用(iOS 9.0之后) func...App这边来做，交互的结果却得反馈给JS： extension MOWKWebViewController: WKUIDelegate { func webView(_ webView: WKWebView...: 客户下单啦~"); } catch (e) { console.log(e); } } 二、与JS的交互其实上面的代理实现的已经差不多了...font-size: 30px; } WKWebview与iOS...); } } 还有些代理方法没有实现，没有研究，待续吧~ github Demo

3.2K2 0

JS与Android IOS 交互

//首先判断IOS的webview是否存在该方法 if(typeof iOScheckOrder === 'function'){ iOScheckOrder(result);//调用ios }

4K1 0

iOS与JS的交互

iOS和JS的交互看似两个问题，其实要解决的问题只有一个，那就是JS如何调用native方法。...= NSNotFound) { /* 1.检测到链接中包含有特殊字段，客户端要接受响应并做后续处理这就相当于js调起了iOS， 2.在真实的使用时，客户端需要和...，JS可以直接用oc方法名来调用oc方法，这样就类似于安卓的addJavaScriptInterface方法，在使用此方法时仍然要导入JavaScriptCore //第一步：创建一个用与JS交互的类JSHandler...>问候2 4.使用第三方工具类：WebViewJavascriptBridge 还未使用过，暂时不做过多介绍 demo的github地址： https://github.com.../DreamcoffeeZS/OC-And-JS 参考链接： http://www.cocoachina.com/ios/20160127/15105.html http://www.jianshu.com

4.1K7 0

iOS开发中OC与JS交互（UIWebView）

https://blog.csdn.net/u010105969/article/details/53189934 之前虽然做过OC与JS交互，但都是比较简单的效果：点击网页中的图片，然后进行图片浏览...现在对OC与JS交互这块也不是很清楚，今天只是把之前的代码贴过来以便今后更好地理解OC与JS的交互。首先需要往网页中注入JS。注入JS的工作是后台做的。...可好像安卓和iOS还是有区别的，因为之前安卓那边可以实现与JS的交互，而我这边却不能。后台后台修改了代码，我这边也就可以进行交互了。... } Objective-C和JavaScript交互的那些事...附上利用WKWebView加载网页OC与JS的交互的地址： http://mp.blog.csdn.net/postedit/53541088

3.9K3 0

iOS小技能：WKWebView与JS的交互

前言由于目前UIWebView 已经被抛弃了，因此推荐使用WKWebView的WKScriptMessageHandler实现iOS与JS交互 WKWebView是Apple在iOS8推出的Webkit...框架中的负责网页的渲染与展示的类，相比UIWebView速度更快，占用内存更少，支持更多的HTML特性 I JS调用iOS 使用例子：点击页面图片，调用iOS方法进行图片放大显示 1.1 JS代码： window.webkit.messageHandlers.openImage.postMessage...see also iOS利用JSExport协议实现与JS的交互 & android 和js的交互 https://blog.csdn.net/z929118967/article/details/77963082...因此，「同层渲染」的原生组件与普通的内置组件表现并无二致。同层渲染不仅解决了原生组件的层级问题，同时也让原生组件有了更丰富的展示和交互的能力。...UIProcess进程：主要负责与 WebContent 进行交互，与 APP 在同一进程中，可以进行 WebView 的功能配置，并接收来自 WebContent 进程的各类消息，配合业务代码执行任务的决策

7.3K3 0

iOS开发中的WKWebView与JS的交互

https://blog.csdn.net/u010105969/article/details/53541088 之前已经写过一个篇OC与JS交互的博客了（博客地址：http://blog.csdn.net.../u010105969/article/details/53189934），可当时用来展示网页的控件是UIWebView，而在iOS8之后苹果推出了WKWebView，此控件也能用来显示网页，可与JS的交互却与...+Mac OS X/); //ios终端 alert('是否是Android：'+isAndroid); alert('是否是iOS：'+isiOS); if(isAcdroid){ }else...DOCTYPE html> iOS and Js *...注意：在利用UIWebView展示网页的时候我们如果要想与JS进行交互那么我们就得获取JS代码中的方法名，而我们在使用WKWebView的时候就不用了。

2.3K2 0

iOS_与H5界面JSBridge交互Demo

iOS与H5界面JSBridge交互Demo 我用了一个library(GCWebviewJSBridge-iOS), github网址:github.com/wheying/GCWebviewJSBridge-iOS...他的Demo不太容易看得懂, 看得我一脸懵逼, 我写了一个简洁明了的Demo 首先做好准工作, 建立一些基本的视图 iOS的准备工作 // 1.新建WebView...注册方法提供给JS调用 iOS注册访问相册方法 [_bridge registerObjCHandler:@"openCamera" handler:^(id data, GCWVJSBResponseCallback...JS注册方法提供给iOS调用 iOS注册提供用户信息方法 /* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */ // 获取用户信息...直接看代码:Demo下载地址哎~ 这种方式实现,需要三方配合测试, 真的是很麻烦啊~

7931 0

iOS中一些WebView与JS交互的JS语句

NSString * HTMLSource = @"document.body.innerHTML";

1.7K2 0

iOS:WKWebView JS 交互这点事

WKWebView 适用于iOS8之后的系统引用 #import 1.OC调用JS NSString *jsmethod = [NSString stringWithFormat...:@"mymethd(\"%@\")",data]; //data（NSDate）为要传给js的数据 [self.wkWebView evaluateJavaScript:jsmethod...completionHandler:^(id _Nullable result, NSError * _Nullable error) { // result js返回值 }];...2.JS调用OC （1）遵循代理 @interface SharecgiteViewController ()...交互，在页面推出的时候，调用 WKUserContentController *controller = self.wkWebView.configuration.userContentController

1.7K3 0

iOS iOS与html进行交互

然后点击下一页的按钮通过js的响应显示另一个网页　　　　　　　　　最后通过下一页的按钮可以返回到首页。　　　　本文仅仅是h5跟ios 的交互的入门所以没有做细致的描述。...首先先说一下思路：我的项目中是那样的：首先h5从后台拿到数据，然后我请求h5的界面，然后通过h5的按钮进行选择，通过ios控制按钮到那个界面。这个小demo不涉及数据传输，只是界面的交互。...简单的实现了交互。...2.允许js的Nitro库加载并使用(uivieqview中限制) 3.支持更多的html5特性 4.高达60fps的滚动刷新频率以及内置手势 5.将uiviewviewdelegate与uiwenview...developer.apple.com/reference/webkit）下边开始讲使用了哦准备工作： 1.设置oc代码 2.设置html代码 3.运行　　oc代码： // // ViewController.m // OC与JS

2.4K10 0

与PHP的session进行交互demo

从MainActivity跳转到MailIndexActivity,第一个请求接口设置session,第二个activity请求接口获取session

6743 0

WebView与js交互

PS：大家都知道现在一个安卓项目里面有一些比较悬的画面，比如说一个炫酷的导航页，或者抽奖大转盘等，这些可以用安卓自身的知识来实现，也可以用JS来实现这些动画，然后安卓直接拿来用，这期间也是免不了有一些交互...，今天这篇文章就是让大家知道，怎么使用安卓与html联动，并且实现交互，这就用到了webview，webview可以嵌入很多页面，比如说webview.loadUrl("http://www.baidu.com...下面写个简单的demo，引入html并点击切换图片。... 这是测试版本js与android交互 demo代码量少，就上传项目了。完。

14.1K7 0

WebView与Js交互

获取WebView对象调用WebView对象的getSettings()方法，获取WebSettings对象调用WebSettings对象的setJavaScriptEnabled()方法，设置js...可用，参数：布尔值在判断是否支持js的时候，不要用alert()，默认不起作用，可以先用document.write()测试调用WebView对象的addJavascriptInterface(obj..., interfaceName)方法，添加js接口，参数：Object对象，String接口名称（这个对象在js中的别名）定义一个内部类MyJavascript 定义一个方法showToast()，显示吐司...交互 new MyJavascript().showToast("111"); websettings.setJavaScriptEnabled(true);...交互显示吐司 <button onClick="showProgressDialog

5.8K3 0

JS与Native交互

混合式开发1：（离线包，所有模块都存放在App的包中）将服务器的资源文件(CSS/JS/Html)，存放到Android 的 assets资源目录下或者本地SD卡都行的, 在WebView 中，首先开启支持...JS功能插件 //这个主要解决加载网页不跳转到系统浏览器 webView.setWebViewClient(new WebViewClient()); webView.setBackgroundColor...== JS与Native进行交互好多资源都有介绍，这里不做过多介绍！...的本地资源JS库，这样既可以减少网络的请求，也是基于网络不佳性能优化的一部分，不过另说的话，如果实在是想更新新的资源，就得进行差分对比进行更新下载最新资源包了！.../js/index2.js"); view.loadUrl("javascript:" + jsContent); view.loadUrl

3.8K2 0

Java与js的交互

在android的开发过程中，有很多时候需要用到本地java代码和javascript进行交互。...android对交互进行了很好的封装，在开发中我们可以很简单的用java代码调用webview中的js，也可以用webview中的js来调用本地的java代码，这样我们可以实现很多原来做不了的功能，比如点击网页上的电话号码后...废话不多说，这次教程的目标如下 android 中的java代码调用webview里面的js脚本 webview中的js脚本调用本地的java代码 java调用js并传递参数 js调用java并传递参数...脚本就可以通过我们给的这个别名来调用我们的方法,在上面的代码中，this是实例化的对象，wst是这个对象在js中的别名功能三 java代码调用js并传递参数只需要在待用js函数的时候加入参数即可...的函数test()的参数功能四 js调用java函数并传参，java函数正常书写，在js脚本中调用的时候稍加注意然后在html页面中，利用如下代码，即可实现调用 <a

5K9 0

js与android webview交互

0x01 js调用java代码 android webview中支持通过添加js接口 webview.addJavascriptInterface(new JsInteration(), "control..."); 参数说明：第一个:java对象对应这个WebView的JavaScript上下文第二个:调用java对象的js中引用对象 Parameters: 1 object the Java object...Null values are ignored. 2 name the name used to expose the object in JavaScript 0x02 java调用js代码构造一个可执行的...js脚本字符串 webview.loadurl("js脚本"); 0x03 关于type="file" input控件在android平台上没触发文件选择事件，android系统屏蔽其消息，需要设置

3.9K5 0

Android与js交互实例

Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true Android（Java）与JavaScript（HTML...）交互有四种情况： 1） Android（Java）调用HTML中js代码 2） Android（Java）调用HTML中js代码（带参数） 3） HTML中js调用Android（Java）代码 4）...与js交互代码 try { mWebView = new WebView(this); setContentView(mWebView); mWebView.requestFocus...4）代码解析：（1）允许Android执行js脚本设置 Android（Java）与js（HTML）交互的接口函数是： mWebView.addJavascriptInterface(getHtmlObject...之间的交互 Android中 Js 扩展及交互

4.7K5 0

UIWebView与JS的交互

Github上的WebViewJavascriptBridge 这个用于UIWebView/WebViews和JS交互的封装库。看sample的时候我容易被各种回调搞晕，我们先看代码。...中，交互的方式只有两种：send 和 callHandle，JS和OC都有这两个方法，所以对应的四种关系是： ?...这个例子展现了一个完整的过程，基本涉及了JS和OC的各种交互包括OC调用JS、JS调用OC等。如果你有其它的业务需求，也基本按照这个流程就可以依样画葫芦了，唯一不同的也就是业务逻辑了。...选择控制台,你就可以看到久违的调试窗口以及JS的console.log了。 ? 以上就是使用 WebViewJavascriptBridge 进行UIWebView与JS的深度交互的例子。...Node.JS都可以写服务器了，React Native都可以开发iOS了。学无止境，iOS应该先搞定OC和Swift再去搞前端。参考：UIWebView与JS的深度交互

3.7K2 0

Android WebView与JS交互实例

本地方法(传递参数) 3、外部注入js代码 4、WebView长按事件相关JS代码： js调用android原生代码点击调用java代码并传递参数实现与js...交互接口： webView.addJavascriptInterface(new MyJavascriptInterface(this), "injectedObject"); 这里的"injectedObject...，这个网页并不是我们订制的，里面没有我们调用的js代码，这时候我们可在前端直接注入js的。...交互第一节（java和js交互）

4.1K2 0

js与form交互方式总结

</form 后来熟悉了js，更加倾向于使用ajax提交表单，有时甚至连form标签都不使用了。...然而，从HTML语义化的角度来说，使用form表单有更强的可读性，虽然简单，仍简单总结下form与js的兼顾。...value="submit"/> 2 方式二：通过button按钮触发自定义方法验证提交会自动忽略其他标签中的属性，如form标签中的onsubmit属性失效，js

2.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭