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

如何用WKWebview和UIWebview实现页面画外音

WKWebView和UIWebView是iOS开发中用于展示网页内容的两个组件。它们可以实现页面画外音的功能,即在网页加载过程中播放外部音频。

  1. WKWebView: WKWebView是iOS 8及以上版本引入的新组件,是基于WebKit引擎的现代化WebView。要实现页面画外音,可以按照以下步骤进行操作:

步骤一:导入WebKit框架 在代码文件的开头添加import WebKit,以导入WebKit框架。

步骤二:创建WKWebView实例 使用以下代码创建一个WKWebView实例,并设置其frame和配置:

代码语言:txt
复制
let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
let configuration = WKWebViewConfiguration()

步骤三:设置WKWebView的配置 为了实现页面画外音,需要为WKWebView的配置添加一个WKUserContentController实例,并添加一个用户脚本,用于注入JavaScript代码。具体代码如下:

代码语言:txt
复制
let userContentController = WKUserContentController()
let userScript = WKUserScript(source: "document.addEventListener('play', function() { /* 处理外部音频播放事件 */ });", injectionTime: .atDocumentEnd, forMainFrameOnly: false)
userContentController.addUserScript(userScript)
configuration.userContentController = userContentController

步骤四:将WKWebView实例添加到视图中 使用以下代码将WKWebView实例添加到视图中:

代码语言:txt
复制
view.addSubview(webView)

步骤五:加载网页 使用以下代码加载网页:

代码语言:txt
复制
let url = URL(string: "https://example.com")
let request = URLRequest(url: url!)
webView.load(request)

通过以上步骤,你可以使用WKWebView实现页面画外音的功能。

  1. UIWebView: UIWebView是iOS 2到iOS 8版本中使用的WebView组件。虽然已经被WKWebView取代,但仍然可以使用UIWebView来实现页面画外音。以下是实现步骤:

步骤一:创建UIWebView实例 使用以下代码创建一个UIWebView实例,并设置其frame:

代码语言:txt
复制
let webView = UIWebView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))

步骤二:设置UIWebView的代理 为了监听外部音频播放事件,需要设置UIWebView的代理,并实现UIWebViewDelegate协议中的相关方法。具体代码如下:

代码语言:txt
复制
class ViewController: UIViewController, UIWebViewDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.delegate = self
    }
    
    // 监听外部音频播放事件
    func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebView.NavigationType) -> Bool {
        if navigationType == .other {
            // 处理外部音频播放事件
        }
        return true
    }
}

步骤三:将UIWebView实例添加到视图中 使用以下代码将UIWebView实例添加到视图中:

代码语言:txt
复制
view.addSubview(webView)

步骤四:加载网页 使用以下代码加载网页:

代码语言:txt
复制
let url = URL(string: "https://example.com")
let request = URLRequest(url: url!)
webView.loadRequest(request)

通过以上步骤,你可以使用UIWebView实现页面画外音的功能。

请注意,从iOS 12开始,苹果推荐使用WKWebView代替UIWebView,因为WKWebView具有更好的性能和功能。因此,建议在新的iOS应用程序中使用WKWebView来实现页面画外音的功能。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

网易严选的wkwebview测试之路

appweb信息交换通道   允许JavaScript的Nitro库加载并使用,UIWebView中限制了   提供加载网页进度的属性(estimatedProgress)   将UIWebViewDelegate...与UIWebView拆分成了14类与3个协议(以前很多不方便实现的功能得以实现:官方文档说明)   基于以上种种优势,严选APP在年后的第一个版本里实现UIwebviewwkwebview的大步跨越...从上图可以明显的看出来,wk在内存消耗方面还是有显著的提升的,尤其是针对性能较差的机器,ios9系统的5s。   ...最后,WKWebView相较于UIWebView在整体上有较大的提升,满足OS上面使用同一套控件的功能,同时对整个内存的开销以及滚动刷新率JS交互做了优化的处理。...而UIwebview可以让app对于H5容器使用NSURLProtocol技术将H5进行离线包的处理,H5的图片Native的图片公用一套缓存,因此WKWebView是没有做缓存处理的,对网页需要缓存的加载性能要求没那么高的还是可以考虑

1.7K10
  • Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

    参考文章:《UIWebViewWKWebViewUIWebView 是苹果继承于 UIView 封装的一个加载 web 内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作...不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web,并应用于 iOS OSX 中,它取代了 UIWebView WebView ,在两个平台上支持同一套 API。...UIWebView WKWebViewUIWebView 的区别: WKWebView 的内存远远没有 UIWebView 的开销大,而且没有缓存; WKWebView 拥有高达 60FPS...; WKWebView 无法发送 POST 参数问题; WKWebView 可以js直接互调函数,不像 UIWebView 需要第三方库 WebViewJavascriptBridge 来协助处理...WKWebView 截屏问题 WKWebView 下通过 -CALayer renderInContext:实现截屏的方式失效,需要通过以下方式实现截屏功能: @implementation UIView

    3.1K00

    WKWebView

    在iOS中,加载网页目前有两种控件:UIWebViewWKWebView。...5,WKWebView可以JS直接互调函数,交互更方便;而UIWebView则需要依靠WebViewJavaScriptBridge第三方库来协助处理与JS的交互,实现起来较繁琐。...相反,UIWebViewAPP是同一个进程,UIWebView加载页面占用的内存被计算为APP内存占用的一部分,当APP超过了系统分配的内存,则会被操作系统crash。...显示加载进度条 我们可以通过监听WKWebView的estimatedProgress属性值来实现一个加载进度条,而UIWebView只能是通过timer事件做一个假的加载进度条。...7,本文主要介绍了如何通过WKWebView来展示一个页面,其实,WKWebView不仅仅只有展示的功能,它还能够Native进行交互。而且iOS中的web应用,起重点就是与Native进行交互。

    6K20

    iOS小技能:UIWebView 被拒的解决方案(用更安全的WKWebView替代UIWebView

    引言 背景:202012之后苹果将不接受使用UIWebView UIWebView 被拒的解决方案:使用WKWebView替代UIWebView 1、查 SDK是否用 UIWebView 的 API...2、移除/升级含UIWebView的第三方SDK(例:AFNetworking) 3、使用WKWebView替代UIWebView 4、WKWebView与JS交互案例(点击页面图片,调用iOS方法进行图片放大显示...比UIWebView更安全 基于NSURLProtocol实现iOS应用底层所有网络请求拦截(含网页ajax请求拦截【不支持WKWebView】NSURLProtocol 只能拦截 UIURLConnection...、NSURLSession UIWebView 中的请求; 对于 WKWebView 中发出的网络请求也无能为力,如果真的要拦截来自 WKWebView 中的请求,还是需要实现 WKWebView...I 使用WKWebView替换UIWebView 1.1 移除/升级包含UIWebView的第三方SDK(grep -r "UIWebView" .) ➜ retail git:(develop)

    3.2K20

    【iOS开发】从 UIWebViewWKWebView

    UIWebView WKWebView 的区别 WKWebView 更快(占用内存可能只有 UIWebView 的1/3~1/4),没有缓存,更为细致地拆分了 UIWebViewDelegate...想要了解更多关于 WKWebView 的特性的,可以自行 Google,这里你可以简单地把它当做是轻量级的 UIWebView。...WKWebView 是 iOS 8 之后才有的 WebKit 中的内容,所以之前我们要同时兼容 iOS 7 iOS 8 的时候,可以推辞说 UIWebView WKWebView 一起做太麻烦了...正文 常用代理方法 在 WKWebView 中,UIWebViewDelegate 与 UIWebView 被重构成了14类与3个协议,下面给出一些在 UIWebView 中常用的方法的 WKWebView...然后实现 WKScriptMessageHandler 中唯一的一个方法: func userContentController(userContentController: WKUserContentController

    1.8K20

    【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

    不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web,并应用于 iOS OSX 中,它取代了 UIWebView WebView ,在两个平台上支持同一套 API。...WKWebView 支持了更多的 HTML5 特性; WKWebView 高效的 app web 信息交换通道; WKWebView 允许 JavaScript 的 Nitro 库加载并使用, UIWebView...增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie ; WKWebView...无法发送 POST 参数问题; WKWebView 可以js直接互调函数,不像 UIWebView 需要第三方库 WebViewJavascriptBridge 来协助处理 js 的交互; 注意...WKWebView 截屏问题 WKWebView 下通过 -[CALayer renderInContext:]实现截屏的方式失效,需要通过以下方式实现截屏功能: @implementation UIView

    2.3K20

    Hybrid App 应用开发中 9 个必备知识点复习

    不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web,并应用于 iOS OSX 中,它取代了 UIWebView WebView ,在两个平台上支持同一套 API。...引擎; WKWebView 增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie...; WKWebView 无法发送 POST 参数问题; WKWebView 可以js直接互调函数,不像 UIWebView 需要第三方库 WebViewJavascriptBridge 来协助处理...但是目前 IOS10 以下的系统以及很少了, 小结: WKWebView 相较于 UIWebView 在整体上有较大的提升,满足 iOS 上面使用同一套控件的功能,同时对整个内存的开销以及滚动刷新率...WKWebView 截屏问题 WKWebView 下通过 -[CALayer renderInContext:]实现截屏的方式失效,需要通过以下方式实现截屏功能: @implementation

    2.7K20

    iOS监听H5页面goBack返回事件 & 网页监听APP返回键 (NavigationBackItemInjection)

    1.1 UIWebView 监听H5页面goBack返回事件 1.2 WKWebView监听H5页面goBack返回事件 2.1 原理 2.2 例子 什么时候会触发这个返回事件?...target 在WKWebView的WKNavigationDelegate代理方法中处理应用跳转 简单的处理WKWebView加载新页面 WKWebView显示JS弹框 WKWebView调用js方法.../z929118967/article/details/1081469552、https://kunnan.blog.csdn.net/article/details/114832679 方式二:注入监听...5、 _webView.allowsBackForwardNavigationGestures = YES;允许左滑右滑,默认值为NO;设置为YES后,即可实现左右滑手势操作后退前进 6、WKWebView...监听H5页面goBack返回事件 UIWebView,可通过UIWebViewNavigationTypeBackForward来监听返回事件 - (BOOL)webView:(UIWebView

    6K21

    Flutter 与 iOS 原生 WebView 对比

    结论: 速度(didStart -> didFinish) UIWebView > flutter_webview > WKWebView 速度(viewDidLoad -> didFinish)WKWebView...flutter 里使用的就是 WK,所以原生的 WKWebView 一样都是 444 分,比 UIWebView 的 437 略胜一筹。...结论:兼容性 WKWebView = flutter_webview > UIWebView 总结 UIWebView: 速度相比较 WKWebView 稍快一点,但是内存是一大硬伤,所以只要条件允许,...是比UIWebView更好的选择,推荐使用; flutter_webView_plugin:在iOS中使用的就是原生的WKWebView,所以总体 native WKWebView 表现差不多。...如果是混编项目中,因为它被包了一层,所以页面加载上存在一定的劣势,所以混编项目中仍然推荐使用 WKWebView

    1.6K20

    Hybrid App 应用开发中 9 个必备知识点复习

    不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web,并应用于 iOS OSX 中,它取代了 UIWebView WebView ,在两个平台上支持同一套 API。...WKWebView 支持了更多的 HTML5 特性; WKWebView 高效的 app web 信息交换通道; WKWebView 允许 JavaScript 的 Nitro 库加载并使用, UIWebView...增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie ; WKWebView...无法发送 POST 参数问题; WKWebView 可以js直接互调函数,不像 UIWebView 需要第三方库 WebViewJavascriptBridge 来协助处理 js 的交互; 注意...WKWebView 截屏问题 WKWebView 下通过 -[CALayer renderInContext:]实现截屏的方式失效,需要通过以下方式实现截屏功能: @implementation UIView

    2.3K30

    UI篇- UIWebView使用大全

    ,这个协议中包含一个必须实现的方法,这个方法是提高App与web端交互的关键,它可以直接将接收到的JS脚本转为OC或Swift对象--网上大神说的,我没用过。)...常用设置方法的使用 1.UIWebView中使用到定位的话,APP中的 info.plist中就要设置跟定位相关的属性值。...导航 一个UIWebView类内部会管理浏览器的导航动作,通过goForwardGoBack的方法你可以控制前进与后退动作: 可以通过来判断是否可以前进或者后退 @property (nonatomic...runJavaScriptConfirmPanelWithMessage,WKWebView UIWebView都继承自 UIView,但是奇怪的是,我是用WKWebView 里面的方法解决了UIWebView...解决办法:UIWebView 初始化的时候Frame里面的y值设置为 20,这样就不会出现UIStatusBar内容重叠的问题了。 20.

    2K10

    技术 | Hybrid载体的变化(一)

    从iOS的角度上来说载体从UIWebView变成了WKWebView,Android有着他们自研的X5当然原生的内核,如果你用着Android7.0也不见得会卡,这才是小程序能出来的根本原因,没有载体,...,我对于他的理解,苹果在iOS8中推出的新框架“Webkit”,其中WKWebView就是用来替换原来的UIWebView,一句话,你用它原来UIWebView出现的各种问题都被解决了。...当然随之而来的会有一些小问题,比如:WKWebView是一个独立进程,那么它的请求就无法通过系统的URL SYSTEM了,你无法像UIWebView一样,可以通过NSURLProtocol来拦截所有的请求..., withError error: Error) { // 页面加载错误 print(error) } 每一个delegate实现中你都应该去做一条日志的记录或者是页面加载完成时间...对于页面的跳转是否运行,你也可以进行监控,当然在这里只需要实现另外三个协议,比如: func webView(_ webView: WKWebView, decidePolicyFor navigationAction

    86630

    【iOS开发】使用 protocol 与 extension 来限制函数作用域

    就会有下面这行代码 webview.frame = UIScreen.mainScreen().bounds 进一步地,我想把这个步骤封装为一个函数,因为比如这个页面屏幕旋转时,或者在其他页面,我都可能需要用到它...func expandView(view:UIView) { if view.isKindOfClass(UIWebView) || view.isKindOfClass(WKWebView)...{ view.frame = UIScreen.mainScreen().bounds } } 这段代码是说,我们现在可以把 UIWebView WKWebView 都扩展到最大了...{ func expandToFullView() { expand(self) } } 现在,UIWebView WKWebView 都可以通过 ExpandableView 这个协议,...来使用我们定义好的(具有扩展一个 View 到整个界面大小这层意义的) expandToFullView 这个函数,而且因为这个函数的实现实际上是 expand 这个函数,所以他们表现起来是一样的。

    55440

    WKWebView 那些坑

    导语 WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView。...WKWebView 拥有60fps滚动刷新率、 safari 相同的 JavaScript 引擎等优势。...在一些用 webGL 渲染的复杂页面,使用 WKWebView 总体的内存占用(App Process Memory + Other Process Memory)不见得比 UIWebView 少很多。...截屏问题 空间玩吧H5小游戏有截屏分享的功能,WKWebView 下通过 -[CALayer renderInContext:]实现截屏的方式失效,需要通过以下方式实现截屏功能: @implementation...在适配 WKWebView 的时候,我们需要自己实现该回调函数,window.alert()才能调起 alert 框,我们最初的实现是这样的: - (void)webView:(WKWebView *)

    4.6K130

    WKWebView 那些坑

    作者:林泽水 导语 WKWebView是苹果在WWDC 2014上推出的新一代webView组件,用以替代UIKit中笨重难用、内存泄漏的UIWebView, 拥有60fps滚动刷新率、safari...在一些用webGL渲染的复杂页面,使用WKWebView总体的内存占用(app process memory + other process memory)不见得比UIWebView少很多。...通过让所有WKWebView共享同一个WKProcessPool实例,可以实现多个WKWebView之间共享Cookie数据。...在适配WKWebView的时候,我们需要自己实现该回调函数,window.alert()才能调起alert框,我们最初的实现是这样的: - (void)webView:(WKWebView *)webView...9、结语 本文总结了那些年导师seanzhu一起填过的WKWebView的坑。虽然WKWebView坑比较多,但是相对UIWebView在内存消耗、稳定性方面还是有很大的优势。

    17.3K21
    领券