iOS UIWebView 中的 Javascript console.log()

Posted 2023-04-18

【中文标题】iOS UIWebView 中的 Javascript console.log()

【英文标题】：Javascript console.log() in an iOS UIWebView

【发布时间】：2011-09-24 09:33:24

【问题描述】：

使用 UIWebView 编写 iPhone / iPad 应用程序时，控制台不可见。 this excellent answer 展示了如何捕获错误，但我也想使用 console.log()。

【问题讨论】：

先在浏览器中写入，打开开发者工具，然后查看控制台输出。

【参考方案1】：

今天与一位尊敬的同事协商后，他提醒我注意 Safari 开发者工具包，以及如何将其连接到 ios 模拟器中的 UIWebViews 以进行控制台输出（和调试！）。

步骤：

打开 Safari 偏好设置 -> “高级”选项卡 -> 启用复选框“在菜单栏中显示开发菜单” 在 iOS 模拟器中使用 UIWebView 启动应用程序 Safari -> 开发 -> i(Pad/Pod) 模拟器 -> [the name of your UIWebView file]

您现在可以将复杂的（在我的例子中，flot）javascript 和其他内容放入 UIWebViews 并随意调试。

编辑：正如@Joshua J McKinnon 所指出的，这种策略也适用于在设备上调试 UIWebViews。只需在您的设备设置中启用 Web Inspector：设置->Safari->高级->Web Inspector (欢呼@Jeremy Wiebe)

更新：也支持 WKWebView

【讨论】：

注意，这个策略也适用于在真实的 iOS 设备上调试。

如果可以的话+100。这太棒了，它也适用于手机间隙应用程序！

尝试使用 iPad，当我进入 Safari 上的开发菜单时，没有可供选择的设备。当我在模拟器上部署时，它就像一个魅力。

@Floydian 你必须在设备上启用 Web Inspector。设置->Safari->高级->Web Inspector.

我的应用没有出现在我的开发菜单中。我启用了网络检查器。 Safari 出现了，但我的应用程序（这是当前的；y 显示 2 个 UIWebviews）没有被检测到.. 有什么想法吗？

【参考方案2】：

我有一个使用 javascript 记录到应用程序调试控制台的解决方案。 这有点粗糙，但它有效。

首先，我们在 javascript 中定义 console.log() 函数，该函数打开并立即删除带有 ios-log: url 的 iframe。

// Debug
console = new Object();
console.log = function(log) 
  var iframe = document.createElement("IFRAME");
  iframe.setAttribute("src", "ios-log:#iOS#" + log);
  document.documentElement.appendChild(iframe);
  iframe.parentNode.removeChild(iframe);
  iframe = null;    
;
console.debug = console.log;
console.info = console.log;
console.warn = console.log;
console.error = console.log;

现在我们必须使用 shouldStartLoadWithRequest 函数在 iOS 应用的 UIWebViewDelegate 中捕获这个 URL。

- (BOOL)webView:(UIWebView *)webView2 
shouldStartLoadWithRequest:(NSURLRequest *)request 
 navigationType:(UIWebViewNavigationType)navigationType 

    NSString *requestString = [[[request URL] absoluteString] stringByReplacingPercentEscapesUsingEncoding: NSUTF8StringEncoding];
    //NSLog(requestString);

    if ([requestString hasPrefix:@"ios-log:"]) 
        NSString* logString = [[requestString componentsSeparatedByString:@":#iOS#"] objectAtIndex:1];
                               NSLog(@"UIWebView console: %@", logString);
        return NO;
    

    return YES;

【讨论】：

见下面 NSTJ 的简单想法。

可能在 swift 4 中？ :D

【参考方案3】：

这是 Swift 解决方案： （获取上下文有点小技巧）

您创建了 UIWebView。

获取内部上下文并覆盖 console.log() javascript 函数。

self.webView = UIWebView()
self.webView.delegate = self

let context = self.webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as! JSContext

let logFunction : @convention(block) (String) -> Void =

    (msg: String) in

    NSLog("Console: %@", msg)

context.objectForKeyedSubscript("console").setObject(unsafeBitCast(logFunction, AnyObject.self), 
                                                     forKeyedSubscript: "log")

【讨论】：

+100！节省了我大量的时间，很棒的 hack，需要对 JS 代码进行 0 次更改。谢谢！！只是我给未来读者的 2 美分：不要忘记将 JavaScriptCore 框架链接到您的项目，并将 import 链接到您的 webview swift 文件中。

适用于我的 Swift 4... 你必须将“log”转换为 NSString..context.objectForKeyedSubscript("console").setObject(unsafeBitCast(logFunction, to: AnyObject.self), forKeyedSubscript : "log" 作为 NSString)

【参考方案4】：

从 iOS7 开始，您可以使用原生 Javascript 桥接器。像下面这样简单的事情

 #import <JavaScriptCore/JavaScriptCore.h>

JSContext *ctx = [webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
ctx[@"console"][@"log"] = ^(JSValue * msg) 
NSLog(@"JavaScript %@ log message: %@", [JSContext currentContext], msg);
    ;

【讨论】：

出于兴趣，放置此代码的理想位置在哪里？

好的，想通了。在您创建 UIWebview 之后，您可以设置任何 JSContext 内容。

JSContext 在 iOS 8+ 和 WKWebView 中是否仍然有效？

我把它放到- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 中，效果很好！

@NikolaiSamteladze：我尝试使用WKWebView 和iOS 11.4.1，但他找不到documentView 并崩溃。我看到了这个answer，看来，这是不可能的。

【参考方案5】：

NativeBridge 对于从 UIWebView 到 Objective-C 的通信非常有帮助。您可以使用它来传递控制台日志和调用 Objective-C 函数。

https://github.com/ochameau/NativeBridge

console = new Object();
console.log = function(log) 
    NativeBridge.call("logToConsole", [log]);
;
console.debug = console.log;
console.info = console.log;
console.warn = console.log;
console.error = console.log;

window.onerror = function(error, url, line) 
    console.log('ERROR: '+error+' URL:'+url+' L:'+line);
;

这种技术的优点是可以保留日志消息中的换行符之类的内容。

【讨论】：

+1。 Apache Cordova 用户注意 - Cordova 已经处理了 console.log，但是这个答案中的 window.onerror 函数非常有用！

对于 Appcelerator/Titanium 开发人员：这也适用于调试您的 Ti.UI.WebView

【参考方案6】：

斯威夫特 5

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 
      webView.evaluateJavaScript("your javascript string")  (value, error) in
          if let errorMessage = (error! as NSError).userInfo["WKJavaScriptExceptionMessage"] as? String 
                print(errorMessage)
          
      
 

【参考方案7】：

尝试了 Leslie Godwin 的修复，但收到此错误：

'objectForKeyedSubscript' is unavailable: use subscripting

对于 Swift 2.2，这对我有用：

您需要导入 JavaScriptCore 才能编译此代码：

import JavaScriptCore

if let context = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") 
    context.evaluateScript("var console =  log: function(message)  _consoleLog(message)  ")
    let consoleLog: @convention(block) String -> Void =  message in
        print("javascript_log: " + message)
    
    context.setObject(unsafeBitCast(consoleLog, AnyObject.self), forKeyedSubscript: "_consoleLog")

然后在您的 javascript 代码中，调用 console.log("_your_log_") 将在 Xcode 控制台中打印。

更好的是，将此代码添加为 UIWebView 的扩展：

import JavaScriptCore

extension UIWebView 
    public func hijackConsoleLog() 
        if let context = valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") 
            context.evaluateScript("var console =  log: function(message)  _consoleLog(message)  ")
            let consoleLog: @convention(block) String -> Void =  message in
                print("javascript_log: " + message)
            
            context.setObject(unsafeBitCast(consoleLog, AnyObject.self), forKeyedSubscript: "_consoleLog")
        
    

然后在你的 UIWebView 初始化步骤中调用这个方法：

let webView = UIWebView(frame: CGRectZero)
webView.hijackConsoleLog()