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

wkwebview执行js文件

WKWebView 是苹果提供的用于在 iOS 应用中嵌入网页内容的组件,它是 WebKit 框架的一部分。WKWebView 提供了比 UIWebView 更高的性能和更多的功能,特别是在执行 JavaScript 文件方面。

基础概念

WKWebView 是一个用于显示网页内容的视图,它使用了 WebKit 引擎来渲染网页。WebKit 是一个开源的浏览器引擎,被多个浏览器所使用,包括 Safari。

优势

  1. 性能提升:WKWebView 比 UIWebView 更快,因为它使用了更现代的渲染引擎。
  2. 内存管理:WKWebView 提供了更好的内存管理,减少了应用的崩溃风险。
  3. JavaScript 执行:WKWebView 支持更高级的 JavaScript 执行,包括与原生代码的交互。
  4. 安全性:WKWebView 提供了更好的安全性,因为它与应用的其余部分隔离。

类型

WKWebView 主要有两种类型:

  1. 标准 WKWebView:用于显示标准的网页内容。
  2. WKUserContentController:用于处理 JavaScript 消息和事件。

应用场景

  1. 混合应用开发:在 iOS 应用中嵌入网页内容。
  2. 单页应用(SPA):加载和执行复杂的 JavaScript 应用。
  3. 动态内容加载:从服务器动态加载和显示网页内容。

执行 JavaScript 文件

要在 WKWebView 中执行 JavaScript 文件,可以使用 WKWebViewevaluateJavaScript(_:completionHandler:) 方法。以下是一个示例代码:

代码语言:txt
复制
import WebKit

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

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        if let url = URL(string: "https://example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 执行 JavaScript 文件
        let jsScript = "alert('Hello, World!');"
        webView.evaluateJavaScript(jsScript, completionHandler: { (result, error) in
            if let error = error {
                print("Error executing JavaScript: \(error.localizedDescription)")
            } else {
                print("JavaScript executed successfully")
            }
        })
    }
}

遇到的问题及解决方法

问题1:JavaScript 执行失败

原因:可能是由于 JavaScript 代码错误、网络问题或权限问题。

解决方法

  1. 检查 JavaScript 代码是否有语法错误。
  2. 确保网络连接正常。
  3. 确保 WKWebView 有权限执行 JavaScript。

问题2:JavaScript 与原生代码交互失败

原因:可能是由于消息传递机制配置不正确。

解决方法

  1. 使用 WKScriptMessageHandler 来处理 JavaScript 发送的消息。
  2. 确保在 WKWebViewConfiguration 中正确配置了 userContentController
代码语言:txt
复制
import WebKit

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

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        userContentController.add(self, name: "nativeHandler")
        config.userContentController = userContentController
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        
        if let url = URL(string: "https://example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeHandler", let body = message.body as? String {
            print("Received message from JavaScript: \(body)")
        }
    }
}

通过以上方法,可以在 WKWebView 中成功执行 JavaScript 文件,并处理相关的交互问题。

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

相关·内容

  • WKWebView的使用与JS交互详细解读

    看网上关于它的博客也是有许多的了,从各个方面总结一下这个WKWebView看网上说它主要是为了和JS做好交互产生的,我们也会相应的尝试一下。就先从它基本的说起!...一:和UIWebView相比它的不同处 1:和JS更好的做交互,也支持H5的一些新特性 2:加载进度条(下面会演示) 3:性能高,加载变得更快更可靠 二:从加载一张网页开始 1:使用这个WKWebView...didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error { NSLog(@"页面加载失败"); } // 接收到服务器重新配置请求之后再执行...www.baidu.com"]) { actionPolicy = WKNavigationActionPolicyCancel; } // 必须这样执行...// 在原生得到结果后,需要回调给JS,通过completionHandler 回调给JS // completionHandler 回调的参数和返回值都是空 -(void)webView:(WKWebView

    3.1K70

    iOS开发中的WKWebView与JS的交互

    /u010105969/article/details/53189934),可当时用来展示网页的控件是UIWebView,而在iOS8之后苹果推出了WKWebView,此控件也能用来显示网页,可与JS的交互却与...在点击前三个按钮的时候会调用方法: // 警告框 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString...如果点击第四个conform按钮会调用方法: // 确认框 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage...如果点击最后一个input按钮会调用方法: // 输入框 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt...注意:在利用UIWebView展示网页的时候我们如果要想与JS进行交互那么我们就得获取JS代码中的方法名,而我们在使用WKWebView的时候就不用了。

    2.3K20

    WKWebView接入PDF.js过程记录处理总结

    问题 最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题,后来查找很多解决方案,最后决定用PDF.js的方式来实现 解决方案 参考https://www.jianshu.com/...能接入PDF,但部分字体在真机上还是接入异常,后来使用 gulp generic-legacy 生成generic-legacy稳定包之后,对Safari进行兼容后,终于能修复字体异常的问题 PDF.js...important; /* move doc up into empty bar space */ } 读取本地PDF文件的方式有两个,一个是初始化接入参数,一个是通过bytes方式动态加载读取 初始化接入参数...}]; }); demo地址:https://github.com/freesan44/PDFJSReader 参考: https://github.com/mozilla/pdf.js...www.jianshu.com/p/fd5f248a8158 https://www.jianshu.com/p/ded81b392d4d https://github.com/mozilla/pdf.js

    2.8K30

    js --- 执行机制

    JS为什么是单线程的?  JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。...process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢? 2 JS为什么需要异步?...如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。 对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验 3 JS单线程又是如何实现异步的呢?   ...是通过的事件循环(event loop),理解了event loop机制,就理解了JS的执行机制。...,而是延迟了一段时间,满足一定条件后才去执行的,这类代码,我们叫异步代码。

    6.3K20

    JS执行机制

    JS执行机制 以下代码执行的结果是什么?...console.log(1); setTimeout(function () { console.log(3); }, 0); console.log(2); 1.1 JS 是单线程...单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。...于是,JS 中出现了同步任务和异步任务。 同步 ​   前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。...他们的本质区别: 这条流水线上各个流程的执行顺序不同。 1.3 JS执行机制(事件循环) 1. 先执行执行栈中的同步任务。 2. 异步任务(回调函数)放入任务队列中。 3.

    7.4K20

    JS执行顺序

    javascript给人的直观感受是,从上往下执行,但实际上却不是这样的,先看个例子 1. console.log(test); 2. var test = "你好"; 3. console.log(...因为javascript执行时,在同一个作用域内是先编译再执行 编译的时候会编译 function 和 var 这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值 所以执行第1行时, var test...已经执行过了,所以test不会报错,而test2就会报错 需要注意的是,对 var test 执行编译时,只是先定义了 test 这个变量,并不会把 "你好" 这个值赋给test,而是到第2行时才给test...赋值的,这就是为什么第1行的执行结果是 undefined 对于上面的例子,可以这样理解 //先编译 var 定义的变量 1. var test; //编译完成后,从上到下执行代码 2. console.log...//执行结果是"你好" function test() { console.log("你好"); } 模拟编译执行过程 //找到 function 定义的部分进行编译 //以函数名作为变量名,同时用函数赋值

    9.2K60
    领券