Tag: webkit

在UIWebView中禁用点击延迟

从历史上看,使混合移动应用感到有点“偏离”的差异之一是,使用简单的click事件处理程序处理UI元素上的轻击时会有所滞后。 创建了诸如Fastclick之类的库来通过使用原始触摸事件立即触发事件处理程序来缓解这种情况。 尽管它们用于基本用途,但为触摸事件增加了JavaScript执行开销,这导致了麻烦。 最近,Android上的Chrome和iOS上的Safari都取消了对不可扩展页面的限制。 这是单次点击延迟的根本原因-无法知道用户是尝试双击还是单次点击,因此浏览器必须在第一次点击后等待才能看到如果另一个来了。 我以为这适用于应用程序中嵌入的Web视图,但是我很失望地看到Quip的行为在iOS 9.3或10.0上并没有改善(对于大多数事件处理程序,我们都有自己的类似Fastclick的包装器,但不适用于到复选框,然后仍然很落后)。 进一步的研究表明,该改进不适用于UIWebView (用于将Web视图嵌入iOS应用程序的较旧机制WKWebView较现代,但仍存在一些局限性,因此Quip尚未迁移到该应用程序)。 有关改进的WebKit博客文章包括一些与相关的跟踪错误相关的链接(如前所述, WKWebView是完全开源的,仍然不错)。 深入研究关联的提交之一,这似乎是要调整多个UIGestureRecognizer实例之间的交互。 通常,处理单次点击的操作必须等待处理两次的操作失败,然后才能触发其动作。 由于一次敲击要花费350毫秒来确定一次敲击是否跟随另一次敲击,因此单次敲击需要很长时间才能失败。 Apple所做的更改是为不可缩放的页面禁用了第二个手势识别器。 UIWebView不是开源的,但我认为其实现必须类似。 为了验证这一点,我添加了一个小代码段以转储其视图层次结构的所有手势识别器(由[self dumpGestureRecognizers:uiWebView level:0]触发: -(void)dumpGestureRecognizers:[UIView *)view level:(int)level { NSMutableString *前缀= [NSMutableString新]; for(int i = 0; i <level; i ++){ [前缀appendString:@“”]; } NSLog(@“%@视图:%@”,前缀,视图); 如果(view.gestureRecognizers.count){ NSLog(@“%@ gestureRecognizers”,前缀); 的(UIGestureRecognizer * gestureRecognizer in view.gestureRecognizers){ NSLog(@“%@%@”,前缀,gestureRecognizer); } } 对于(UIView * view.subviews中的subview){ [self dumpGestureRecognizers:subview级别:level +1]; } […]

中国的MapKit

Apple Maps是我的默认地图应用程序。 无论我走到哪里,我总是使用它。 特别是在日本和新加坡,它将告诉我地铁站的出口以及如何步行。 超级方便。 我就喜欢。 在中国,Apple Maps使用高德提供的数据。 它也可能被称为AutoNavi。 这是一家本地公司,隶属于阿里巴巴集团。 他们在中国的数据相当不错。 与百度地图不同,与高德从未接触过错误的路线。 但是,它们在中国境外的数据非常有限。 如果您在中国并且正在寻找不在中国的地方,那么地图将如下所示: 这就是欧洲和美国的地图外观。 只有街道名称。 如果您认为情况不好,请让我们检查一下新加坡。 我们基本上是在看空白地图。 不幸的是,如果我们尝试在中国以外的地方搜索,我们将永远不会获得想要的结果。 它只会显示位于中国的结果。 如果您设备的GPS位置在中国,您将遇到问题。 (请注意:至少对于在中国销售的设备,我在其他国家/地区没有购买任何设备。如果您知道其他设备是否也会发生这种情况,请发表评论并让我知道。谢谢。) 也许您不是在制作旅行计划应用程序,但是这些问题也可能会影响您的客户。 MapKit使用与Apple Maps应用完全相同的地图数据。 以下示例来自Weather Line。 我在中国,想查询阿姆斯特丹的天气。 这就是我得到的: 如果您正在模拟器上进行测试,则无法发现问题,因为在模拟器地图上,数据来自Apple,而不是来自高德。 解决方案 Mapbox是一个很好的选择。 他们有很好的文档。 您甚至可以在https://www.mapbox.cn上请求在中国使用的其他API密钥。 他们声称它将为中国用户更快地加载地图。 如果由于某些原因您不想使用Mapbox,可以尝试使用Google Maps Web视图。 即使不是本地语言,您也可以使用Google Maps JavaScript API来实现MapKit和Mapbox提供的大多数功能。 请记住,要使用适用于中国的Google Maps API,URL必须为 http://maps.google.cn 。 仅HTTP有效。 HTTPS没有。 下一步是什么 我将写有关WKWebView的文章 。 这将分为两个部分。 在第一个中,我将讨论WKWebView的基础知识,如何在Mac上加载本地文件和调试。 在第二篇文章中,我将展示native和JavaScript如何相互通信。 […]

Hello RemoteDebug iOS WebKit适配器:从任何地方调试Safari和iOS WebView

目的 此适配器可通过基于Chrome调试协议(CDP)的工具在iOS上调试Safari / Webkit。 该项目的范围是提供一个协议适配器,以处理Chrome调试协议和Webkit远程调试协议之间的API差异 。 该项目是在顶部构建的,是现有ios-webkit-debug-proxy项目的延续。 目标 我希望通过拥有一个开放源代码协议适配器,我们可以团结精力和资源,直到现在为止,这些资源和资源一直用于保持 Apache Cordova 和iOS WebKit / Safari Web调试为各种工具和客户端工作。 使用一个遵循Chrome调试协议(CDP)API的中央协议适配器,工具可以专注于实现该API,并让协议适配器处理兼容性。 建筑 协议适配器在TypeScript中作为基于节点的CLI工具实现,该工具启动ios-webkit-debug-proxy的实例,检测连接的iOS设备,然后根据iOS版本启动正确的协议适配器的实例。

iOS 11中的自定义方案处理和WKWebview

Apple希望每个人在将其作为iOS 8 SDK的一部分发布时,从完美的UIWebview迁移到新的WKWebView 。 甚至有一个“美丽”的警告消息,并且已经存在了四年了……嗯,你知道吗? 大多数应用程序仍使用UIWebView ,因为它易于使用和完成工作。 但是,您确实应该迁移到WKWebView ,因为它由WebKit框架直接支持,它具有更多功能,并且使用了更快的JavaScript引擎。 在Glose图书中,作为读者的一部分,我们广泛使用UIWebView ,即使它是非常自定义的,也融合了本机和Web交互以及UI。 是的,新的Javascript桥(称为WKScriptMessageHandler )是WKWebView最精彩的东西之一。 书籍的核心内容仍为HTML格式。 因此,使用浏览器视图(UIWebView或其他任何视图)来显示它是有意义的。 在我们应用程序的当前版本中,我们的阅读器仍在UIWebview上运行(可耻,可耻,可耻),因为当时它是唯一可用的解决方案。 在开发版本中,我们制作了一个全新的移动阅读器,这次它基于WKWebView 。 为什么花了我们这么长时间? 因为直到iOS 11 SDK都没有办法使用WKWebView来处理自定义url方案加载。 使用WKWebView仍然有很多优点,但是自定义方案加载是一个总的障碍 。 UIWebView支持自定义NSURLProtocol ,这意味着为了提供一种自定义方式来加载自定义url方案,您只需创建NSURLProtocol的子类,然后向NSURLProtocol注册您的类。 然后,任何调用您的自定义方案的东西(例如helloworld://)都会调用您的自定义NSURLProtocol类。 然后,您负责加载和转发您的内容。 这是非常强大的功能,在我们的案例中,我们使用它来加载书籍中的各种资产,例如图像,视频等。 我们可以使用很多变通方法,但是它们大多是黑客,对于生产应用程序来说并不好。 WKWebview不支持自定义NSURLProtocol ,因此您可以注册所需的任何类,由于WKWebView请求,它永远不会被调用。 好吧! 苹果在iOS 11中添加了WKURLSchemeHandler 。 它的工作原理与NSURLProtocol几乎相同! 这是一些您可以理解的代码示例,因为老实说,您实际上并不关心上面所有的废话。 因此,首先创建WKURLSchemeHandler子类,必须实现start和stop这两个方法。 只有start方法才有意义,因为这是您要做的工作。 stop方法可以保留为空,或用于您进行任何必要的清理。 您可以访问完整的请求,因此您可以检查,从url中提取任何内容,加载所需的数据并将其转发到WKWebView 。 然后,您的内容应加载。 在创建类之后,您必须在WKWebView中注册它,并且在创建其配置时必须这样做: 一切就绪,现在您可以在WKWebView中加载任何自定义内容了!

使用WebKit在iOS上进行JavaScript操作

作为iOS开发人员,有时我们希望将Web内容包含在iOS应用程序中。 我们可能希望从与本机应用程序版本配对的网站上加载内容,或者我们可能希望让用户打开链接而不必打开其他浏览器。 在iOS 8之前,我们必须使用UIWebView,它笨拙,内存泄漏且难以调试。 但是,在iOS 8之后,苹果弃用了针对WKWebView的UIWebView,并引入了现代WebKit API。 新框架极大地提高了将Web内容添加到iOS应用程序的性能和灵活性,从而为开发人员提供了更多控制权和更多功能。 它还极大地改善了与JavaScript的本地通信。 在本文中,我将向您展示如何将脚本注入网页并接收数据以执行诸如更改网页背景或直接从JavaScript调用本机函数之类的示例。 WKWebView在WWDC 2014上首次发布,是改变游戏规则的工具,用于在iOS应用中呈现Web内容。 它利用核心动画和硬件加速功能,使网页可以60fps的速度滚动。 苹果开发人员淘汰了旧的JavaScript引擎,并用Nitro取代了它,后者是Safari的基础。 它还包含与Safari中相同的内置手势,可用于前后缩放和导航。 创建起来也超级容易! 让我们从一个简单的WKWebView外观的简单示例开始。 开始所需要做的就是创建WKWebView对象,添加约束并传入URLRequest来加载网页: 请注意,您只能加载默认情况下安全的URL(即,仅HTTPS连接)。 您可以将“ App Transport Security设置”键添加到Info.plist中,以出于开发目的而覆盖此设置。 然后,在“应用程序传输安全设置”下,添加项“允许任意加载”并将其值设置为“是”: 这将绕过HTTPS要求,因此您可以使用localhost或HTTP连接进行测试。 但是请记住,这仅用于开发而非生产。 您应始终遵守Apple的安全标准,以通过行业标准协议安全地加载Web内容。 因此,我们仅使用了几行代码就将Web内容加载到了我们的应用程序中。 如果我们想修改应用程序中的网页怎么办? 我们可以像以前一样实例化WKWebView对象,但是这次传入类型为WKWebViewConfiguration的新配置对象: 使用配置初始化WKWebView 在这里,初始化Web视图时可以修改很多属性。 例如,您可以控制页面是否以增量方式呈现,播放之前哪些媒体类型需要触摸手势,HTML5视频是否可以画中画显示或如何与加载的脚本进行通信。 WKWebViewConfiguration具有一个名为userContentController的属性,该属性使您可以传递WKUserContentController对象。 该对象使用addUserScript(_ :)注入JavaScript,并通过add(_:name :)侦听消息处理程序。 如果您是网络开发人员,则类似于Chrome扩展程序之类的浏览器插件对加载的网络内容的处理方式。 WKUserScript对象添加到userContentController后,允许开发人员使用JavaScript并将其注入到网页中。 这是添加脚本以从上方更改Google网页背景颜色的简单示例: 创建用户脚本以更改背景色 init方法采用三个参数: source :传入JavaScript的字符串表示形式作为源。 injectionTime :指定JavaScript是在文档开始还是在文档末尾加载。 如果传入WKUserInjectionTime.atDocumentStart,则脚本将在创建文档元素之后但在解析任何文档之前立即运行。 如果传入WKUserInjectionTime.atDocumentEnd,则脚本将在文档解析完成之后但在加载任何子资源(例如图像)之前运行。 这与触发DOMContentLoaded事件时相对应。 forMainFrameOnly :指定脚本是在所有框架中运行还是仅在主框架中运行。 对于您的源代码,您可以简单地传递一个字符串,或者,如果脚本更复杂,则可以从Xcode的本地文件中加载它。 为此,请将您的JavaScript文件添加到Xcode,获取文件的路径,然后使用文件内容初始化字符串: 从本地文件加载JavaScript 这是在启动时向网络视图添加基本用户脚本的简要概述。 […]

iOS Webkitanimation性能仅在视网膜显示上受损

我有一个使用CSS转换的移动应用程序来设置各种页面元素的不透明度(淡入淡出)。 另外值得注意的是,我在整个页面中都使用了embedded式字体。 我注意到,在iPhone 4上,该页面的性能是绝对可怕的,只有在该设备上。 在3GS的performance就好了。 animation不仅动荡不安; 即使滚动页面,并点击页面元素,如select标签需要永远。 任何人都可以看到提高视网膜显示iPhone上的animation/渲染性能?

水平一页网站:Mobile-Webkit滚动和滑动问题

这里是我正在使用的基本演示: http : //jsfiddle.net/3N8wY/9/ 问题#1 如果您查看来自正版的Android浏览器或(更重要的是)iOS设备的链接,网站将不会滚动。 它做这个奇怪的烦躁/脉冲的事情,并没有去哪里。 如果你select了一个链接的方式,它有时会滚动,但它永远不会在正确的位置结束。 我相信这与JS有关。 当我在手机上试用时,我注意到这并不是对所选链接的新值进行哈希处理。 JS $(document).ready(function () { $('.main-nav').on('click', function (e) { e.preventDefault(); var toTarget = $(this).attr('href'); history.pushState(null, null, toTarget); $(window).triggerHandler('hashchange'); }); }); $(window).on('hashchange', function () { if(!window.location.hash) return; var $target = $(window.location.hash); console.log($target); $('html, body').stop().animate({ scrollLeft: $target.offset().left, scrollTop: $target.offset().top }, 900, 'swing'); }); JS的信用 – 水平一页网站不会“倒退”到以前的DIV 问题#2 如果您向左或向右轻扫,则会移动页面。 […]

移动Safari上的touchMove事件 – 导致整个页面被拖动

当按照苹果文档应用触摸事件时 element.addEventListener("touchstart", touchStart, false); element.addEventListener("touchmove", touchMove, false); element.addEventListener("touchend", touchEnd, false); element.addEventListener("touchcancel", touchCancel, false); 和拖动,整个HTML页面(在iPad或iPhone上)往往被拖动。 我如何防止? 我尝试添加 event.preventDefault(); 到callback,以及 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 没有成功。

无法将WebKit框架构build到iOS项目中

我已经从Apple下载了iOS 4.3.3的WebCore源代码。 现在我怎么把WebKit整合到我的iOS项目中? 我不问如何使用 WebKit类。 我想构build一个包含WebKit类(如DOM对象)的iOS应用程序,但我不知道如何为iOS构buildWebKit框架。 有没有人知道如何构buildiOS的WebKit框架? 谢谢。

iOS Webkit忽略媒体查询

我正在使用移动优先开发方法在一个网站( villa-antonia )上工作。 也就是说,我的CSS首先是移动的,然后添加/覆盖样式与媒体查询更高的分辨率。 事实是,在iPhone中,背景图像加载在所有东西之上,尽pipe在媒体查询中有更高的分辨率。 这是CSS文件(我认为涉及的部分)的一部分: body { background: #c70000; overflow: auto; -webkit-overflow-scrolling: touch; } /* Minimum width of 960 pixels. */ @media only screen and (min-width: 960px) { body { background: transparent url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } } 在我的CSS的理解,iPhone甚至不应该加载bg.jpg图像,因为是在媒体查询。 但是,当我向下滚动时,这就是我所得到的: 你看到的车是bg.jpg的一部分,我向下滚动显示在屏幕上的bg.jpg越多。 我真的不知道为什么加载图像…任何想法? PS:在iPad和iPhone 4(以及可以在iOS模拟器上testing的所有其他设备)中也是如此。