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

如何使用一个wkwebview让tabbar在网页之间导航?

使用一个WKWebView可以实现在网页之间导航的TabBarWKWebView是iOS中的一个控件,用于展示网页内容。下面是使用WKWebView实现TabBar导航的步骤:

  1. 创建一个UITabBarController作为主界面的根视图控制器。
  2. UITabBarController中创建多个UIViewController作为不同的网页视图控制器。
  3. 在每个网页视图控制器中,创建一个WKWebView作为网页的展示控件。
  4. 在每个网页视图控制器中,添加一个UITabBarItem作为TabBar的图标和标题。
  5. 在每个网页视图控制器中,实现WKNavigationDelegate协议的方法,以便处理网页导航事件。
  6. UITabBarController中,将每个网页视图控制器添加到viewControllers数组中。
  7. 设置UITabBarController为主窗口的根视图控制器。

这样,当用户点击TabBar上的不同项时,UITabBarController会自动切换到对应的网页视图控制器,并展示相应的网页内容。

以下是一个示例代码,演示如何使用WKWebView实现TabBar导航:

代码语言:txt
复制
import UIKit
import WebKit

class WebViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView = WKWebView(frame: view.bounds)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        let url = URL(string: "https://www.example.com")!
        let request = URLRequest(url: url)
        webView.load(request)
    }
    
    // 实现WKNavigationDelegate协议的方法,处理网页导航事件
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 网页加载完成
    }
}

class TabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let webViewController1 = WebViewController()
        webViewController1.tabBarItem = UITabBarItem(title: "网页1", image: UIImage(named: "web1"), tag: 0)
        
        let webViewController2 = WebViewController()
        webViewController2.tabBarItem = UITabBarItem(title: "网页2", image: UIImage(named: "web2"), tag: 1)
        
        viewControllers = [webViewController1, webViewController2]
    }
}

// 在AppDelegate中设置TabBarController为根视图控制器
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    window = UIWindow(frame: UIScreen.main.bounds)
    window?.rootViewController = TabBarController()
    window?.makeKeyAndVisible()
    return true
}

在上述示例代码中,WebViewController是一个自定义的视图控制器,用于展示网页内容。TabBarController是一个自定义的UITabBarController子类,用于管理多个网页视图控制器。在TabBarControllerviewDidLoad方法中,创建了两个WebViewController实例,并将它们添加到viewControllers数组中。每个WebViewController都有一个独立的WKWebView用于展示网页内容。

请注意,示例代码中的网页加载使用的是https://www.example.com作为示例URL,你可以根据实际需求修改为你想要加载的网页URL。

这里没有提及腾讯云相关产品和产品介绍链接地址,因为这个问题与云计算领域的专业知识、编程语言、开发过程中的BUG等内容相关,与特定的云计算品牌商无关。如果你有关于腾讯云的具体问题,可以提出来,我会尽力给出相应的答案和建议。

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

相关·内容

iOS中WebKit框架应用与解析 原

iOS中WebKit框架应用与解析 一、引言         iOS8之前,应用中嵌入网页通常需要使用UIWebView这样一个类,这个类通过URL或者HTML文件来加载网页视图,功能十分有限,只能作为辅助嵌入原生应用程序中...WebKit框架中添加了一些原生与JavaScript交互的方法,增强了网页视图与原生的交互能力。并且WebKit框架中采用导航堆栈的模型来管理网页的跳转,开发者也可以更加容易的控制和管理网页的渲染。...进行使用前,我们首先应该清楚整个框架的结构和开发思路,下面一张脑图中基本列出了WebKit框架中所涉及到的所有重要的类以及他们之间的相互关系: ?...WKNavigationDelegate:网页跳转间的导航管理协议,这个协议可以监听网页的活动。 WKNavigationAction:网页某个活动的示例化对象。...三、使用WKWebViewConfiguration对WebView进行配置         使用下面的代码可以创建一个WKWebView视图,创建WebView视图时,需要使用WKWebViewConfiguration

1.9K40
  • iOS的WebView——WKWebView

    前言 iOS8中,苹果推出了WKWebViewWKWebView一个突出特点,就是内存占用少。 但作为一个全新的WebView,API相比于之前的UIWebView肯定会有所不同。...今天就在这里记录一下WKWebView的基本使用。 Webview的使用,通常包含以下几个部分:浏览器的基本设置,浏览器的各种回调,浏览器中js如何调用原生方法。...与其他WebView的基本使用没有太大区别,将它当作一个普通的UIView进行布局,然后调用loadRequest方法,即可展示相应的网页。...在此列举几项及其作用,由于类目繁多,会有遗漏,真正需要使用时,可以xcode的help中寻找,查阅。...WKNavigationDelegate 如命名,这个是WKWebView导航的代理。它控制了WKWebView加载一个页面流程中的各个关键时间节点的。

    3.5K20

    网易严选的wkwebview测试之路

    WKWebView网页加载速度大有提升,占用更少内存。   ...  以前UIWebView会自动去NSHTTPCookieStorage中读取cookie,但是WKWebView并不会去读取,因此导致cookie丢失以及一系列问题,测试的过程中我们发现在一个活动页面触发了登录之后...页面样式问题   测试过程中,替换wkwebview之后,很多APP内的H5页面样式出现了兼容的问题,尤其是针对iPhone X的适配方面,对此我们只能全局查看各种H5页面,一一检查页面是否错乱,大部分页面的问题都是页面底部或者导航栏异常...最后,WKWebView相较于UIWebView整体上有较大的提升,满足OS上面使用同一套控件的功能,同时对整个内存的开销以及滚动刷新率和JS交互做了优化的处理。...而UIwebview可以app对于H5容器使用NSURLProtocol技术将H5进行离线包的处理,H5的图片和Native的图片公用一套缓存,因此WKWebView是没有做缓存处理的,对网页需要缓存的加载性能要求没那么高的还是可以考虑

    1.7K10

    UI篇- UIWebView使用大全

    导航 一个UIWebView类内部会管理浏览器的导航动作,通过goForward和GoBack的方法你可以控制前进与后退动作: 可以通过来判断是否可以前进或者后退 @property (nonatomic...根据导航类型参数可以得到请求发起的原因 //当网页视图被指示载入内容而得到通知应该返回是,这样会进行加载通过导航类型参数可以得到请求发起的原因,可以是以下任意值: - (BOOL)webView:(UIWebView...OC中给JS传参数,如何在OC中获取到JS传递过来的参数 如果要实现这样的JS和OC的数据交互,需要使用一个第三方文件:WebViewJavascriptBridge 给web发消息 @property...如何消除Web中 Alert弹框中出现的网址 ? 这里解决的方法是通过使用 WKWebView 的方法。...UIWebView iOS11中的使用。 ? UIWebView iOS 11上 当顶部的 y值设为 0 时,是依然无法盖住UIStatusBar区域的,但是滚动时就会出现问题了。

    2K10

    分享超详细 WKWebView 开发和使用经验

    WKWebView 几个不常用的特性 WKWebview 加载过程中的性能指标图解 WKWebview 秒开的实践及踩坑之路 今天分享的这篇文章全面的介绍了 WKWebView,作者根据开发和使用经验从属性...didFailProvisionalNavigation 当容器开始加载数据 当网页内容开始主 Frame 开始渲染 提交主 Frame 导航期间发生了错误 当接受 HTTPS 请求证书后执行 当容器内容发生崩溃...网页导航代理,可以理解为网页的生命周期事件循环。...当一个 WebView初始化,一个新的 Web 内容进程会从一个特殊的进程池中创建,或者一个已存在的进程会被使用。...iOS 11 以上支持内容过滤规则配置 该配置需要结合内容过滤器编译一起使用,通过对 js 指定的规则编译后得到一个 WKContentRuleList ,并且通过 userController 添加进

    4.8K30

    WKWebView使用

    WKWebView使用 前言 最近项目中的UIWebView被替换为了WKWebView,因此来总结一下WKWebView使用。...示例Demo:WKWebView使用 本文将从以下几方面介绍WKWebView: 1、WKWebView涉及的一些类 2、WKWebView涉及的代理方法 3、网页内容加载进度条的实现 4、JS...和OC的交互 5、本地HTML文件的实现 一、WKWebView涉及的一些类 WKWebView网页的渲染与展示 注意: #import //初始化...后,会发现字体小了很多,这应该是WKWebView与html的兼容问题,解决办法是修改原网页,要么我们手动注入JS NSString *jSString = @"var meta = document.createElement...文本编辑偏好设置.png 详情请前往我的Github:WKWebView使用 如果我WKWebView使用的总结没帮到你,你也可以看看下面几篇文: https://www.jianshu.com/p

    2.8K61

    iOS开发----JavaScriptCore、UIWebView及WKWebView交互的那些事

    假设一个简单的场景 Web通过一个 输入一个字符串,通过点击按钮设置成导航标题 原生设置完导航标题后,告知Web"以将"设置成导航Title,并在网页最底下的label显示出来...分别使用 UIWebView 以及 WKWebView 实现效果如下: JavaScriptCore 类库里面有12个类(还有两个是负责导入相关类的头文件以及一个关于WebKit的宏定义);基本的交互过程中...,其实最常使用的有三个:JSContext、JSValue、JSExport JSContext 简单的理解为执行JavaScript的一个环境,就好像我们绘制View时候需要获取的CGContext...UIWebViewDelegate UIWebViewDelegate 中的webViewDidFinishLoad() 方法中对JSContext进行截取,并执行操作: WKWebView 首先有一点...添加JavaScript交互 WKNavigationDelegate中告知web当前使用webView的类型: 履行WKScriptMessageHandler协议,完成交互操作即可 最后记得移除哦

    1.5K20

    iOS小技能:右滑返回

    kunnan_forceEnableInteractivePopGestureRecognizer { return YES; } II QMUI导致右滑返回没有生效的解决方法 先来看看QMUI如何实现实现右滑返回...: 消息发送和消息转发时会用到动态添加方法 全局控制返回手势 下面的+addMethod方法有三个参数,第一个参数是要添加方法的类,第二个参数是方法的SEL,第三个参数则是提供方法实现的SEL。...]; 完整初始化代码 - (WKWebView *)webView{ if(_webView == nil){ //创建网页配置对象 WKWebViewConfiguration...WKUserContentController * wkUController = [[WKUserContentController alloc] init]; //注册一个...rightBarButtonItem 自定义导航条的rightBarButtonItem,采用initWithCustomView:rightBtn设置rightBtn.frame,文字更大,更容易点击

    2.2K30

    iOS 原生和H5混合开发总结

    之前项目中使用过WebViewJavascriptBridge,使用起来很简单,但是这次项目中没有使用。只用了原生的WKWebView。这里就不具体讲怎么使用WKWebView。...思路: 1.写一个自定义的webVIew继承WKWebView。用于初始化和增加进度条(UIProgressView) 2.写一个Web通用的ViewController。处理各种逻辑。...ofObject:(id)object change:(NSDictionary *)change context:(void *)context{ //网页...NSString *url = [navigationAction.request.URL absoluteString]; NSLog(@"url--%@",url); } 但是Android使用...所以后来采用和js交互的方式进行跳转 2.iOS给JS提供了一个页面返回的方法,但是测试过程中发现,这个方法会无限调用,导致页面一直pop; 调用的结果是因为iOS这边使用一个通用的页面,比如两个页面一个页面是

    2.2K20

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

    库加载并使用, UIWebView 中限制了; WKWebView 目前缺少关于页码相关的 API; WKWebView 提供加载网页进度的属性; WKWebView 使用 Safari 相同的 JavaScript... webkit2 的设计里使用 MessageQueue 进行进程之间的通信,Network Process 会将请求 encode 成一个 Message,然后通过 IPC 发送给App Process...解决办法: 无奈之下,我们只能约定一个JS接口,游戏开发商实现该接口,具体是通过 canvas getImageData()方法取得图片数据后返回 base64 格式的数据,客户端需要截图的时候...全局 WebView 客户端刚启动时,就初始化一个全局的 WebView 待用,并隐藏,当用户访问了 WebView 时,直接使用这个 WebView 加载对应网页,并展示。...然后 WebView 列表中选择你要调试的页面,点击“ Inspect ”选项,跟调试 PC 网页一样,使用 Chrome 控制台进行调试。

    3.1K00

    WKWebView 那些坑

    通过所有 WKWebView 共享同一个 WKProcessPool 实例,可以实现多个 WKWebView 之间共享 Cookie(session Cookie and persistent Cookie...3、WKWebView NSURLProtocol问题 WKWebView 独立于 app 进程之外的进程中执行网络请求,请求数据不经过主进程,因此, WKWebView 上直接使用 NSURLProtocol... webkit2 的设计里使用 MessageQueue 进行进程之间的通信,Network Process 会将请求 encode 成一个 Message,然后通过 IPC 发送给 App Process...接入 now 直播的时候,我们发现在 iOS 9 上 WKWebView 会出现页面被拉伸变形的情况,最后发现是window.innerHeight值不准确导致(WKWebView上返回了一个非常大的值...无奈之下,我们只能约定一个JS接口,游戏开发商实现该接口,具体是通过 canvas getImageData()方法取得图片数据后返回 base64 格式的数据,客户端需要截图的时候,调用这个JS接口获取

    4.6K130

    WKWebView 那些坑

    通过所有WKWebView共享同一个WKProcessPool实例,可以实现多个WKWebView之间共享Cookie数据。...3、WKWebView NSURLProtocol问题 WKWebView独立于app进程之外的进程中执行网络请求,请求数据不经过主进程,因此,WKWebView上直接使用NSURLProtocol...webkit2的设计里使用messageQueue进行进程之间的通信,network process会将请求encode成一个Message,然后通过IPC发送给app process。...接入now直播的时候,我们发现在ios9上WKWebView会出现页面被拉伸变形的情况,最后发现是window.innerHeight值不准确导致(WKWebView上返回了一个非常大的值),而H5...无奈之下,我们只能约定一个JS接口,游戏开发商实现该接口,具体是通过canvas getImageData()方法取得图片数据后返回base64格式的数据,客户端需要截图的时候,调用这个JS接口获取

    17.3K21

    uni-app开发一个小视频应用(一)

    “ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,是一种终极的跨平台解决方案,这里的平台,主要指的是App平台(android、ios)、小程序平台、H5平台。...二 创建底部导航栏组件 首先要弄清楚我们的uni-app已经提供了tabBar的配置,即提供了底部导航栏的,那为什么还需要自定义底部导航栏呢 ?...那么没有了默认导航栏,我们怎么进行tabBar页面的切换呢?我们可以通过组件设置不同的跳转方式,实现应用内各种页面之间的跳转。记住APP和微信小程序是不支持标签跳转的。...}, 1000); } ios和安卓App平台上运行时,会出现tabBar隐藏失败的情况,解决办法就是隐藏的时候需要添加一个1000ms左右的延迟。...这里需要特别说一下如何页面全屏显示,我们设置页面全屏通常会需要全屏的元素设置上width: 100%; height: 100%;可是当我们给视频播放组件根元素标签设置上width为100%,height

    3.9K71

    前端工程师所需要了解的WebView

    | 导语 现如今,在做移动端 H5 开发时,少不了与 Native 之间进行交互。而在Native中,H5的承载容器为 WebView,其核心是使用 WebView 控件实现加载 url。...简单来说 WebView 是手机中内置了一款高性能 Webkit 内核浏览器, SDK 中封装的一个组件。不过没有提供地址栏和导航栏,只是单纯的展示一个网页界面。...JSBridge JSBridge 简单来讲,主要是 给 JavaScript 提供调用 Native 功能的接口,混合开发中的『前端部分』可以方便地使用地址位置、摄像头甚至支付等 Native 功能...kill掉 WWDC 2014 大会上,IOS8推出了 WKWebViewWKWebView 是现代 Webkit API iOS 8 和 OS X Yosemite 应用中的核心部分。...这个强大的功能允许页面中以安全且唯一的方式操作网页内容。

    1.7K10

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

    中限制了; WKWebView 目前缺少关于页码相关的 API; WKWebView 提供加载网页进度的属性; WKWebView 使用 Safari 相同的 JavaScript 引擎; WKWebView... webkit2 的设计里使用 MessageQueue 进行进程之间的通信,Network Process 会将请求 encode 成一个 Message,然后通过 IPC 发送给 AppProcess...全局 WebView 客户端刚启动时,就初始化一个全局的 WebView 待用,并隐藏,当用户访问了 WebView 时,直接使用这个 WebView 加载对应网页,并展示。...然后 WebView 列表中选择你要调试的页面,点击“ Inspect ”选项,跟调试 PC 网页一样,使用 Chrome 控制台进行调试。...六、 iOS 平台下如何调试 WebView?

    2.3K20
    领券