iOS webView swipe left or right to navigate

Question

I'm making a simple webView iOS 7 app and I would like the user to be able to swipe left or right to go forward or backward on webpages. Just like you can do in safari in iOS.

I think it is called pagination — but I have no idea how to use it. How can I implement this? I'm a noob so if you could tell me step by step I'd appreciate it.

Thanks

Answer 1

I'm working on a similar feature in an app of mine, and here's what I've figured out so far - I'm not done yet, but here's a way to get started.

First, I'm assuming you're developing for iOS 7 only - while it's totally possible to build this for iOS 6, you can take a couple of neat shortcuts if you're only developing for 7.

The forward/backward gestures are handled with a UIScreenEdgePanGestureRecognizer. You add it to the web view like so:

    UIScreenEdgePanGestureRecognizer *bezelSwipeGestureRecognizer = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(swipeBack:)];
bezelSwipeGestureRecognizer.edges = UIRectEdgeLeft;
bezelSwipeGestureRecognizer.delegate = self;
[self.view addGestureRecognizer:bezelSwipeGestureRecognizer];

UIView *invisibleScrollPreventer = [UIView new];
invisibleScrollPreventer.frame = CGRectMake(0, 0, 10, self.view.frame.size.height);
[self.view addSubview:invisibleScrollPreventer];

That'll add the back-swipe gesture. The tricky part is that invisibleScrollPreventer - it's an imperfect hack, but it'll avoid scrolling your web view instead of doing the back action. (There's probably a better way to handle that, but that's my current solution.)

In your swipeBack: method, you'll do something like the following:

-(void)swipeBack:(UIScreenEdgePanGestureRecognizer *)recognizer
{
    if (recognizer.state == UIGestureRecognizerStateEnded) {
        if (_webView.canGoBack) {
            [_webView goBack];
        }
    }
}

You'd do these same things to add a goForward: method to your web view.

The real trick is getting the web page that you're going back to (or forward to) to appear onscreen as you're swiping back or forward, as in Safari in iOS 7. I'm not 100% sure how to do this (I haven't built that function yet in my app, but I will soon) and I'm guessing it's an iOS 7 snapshotView with some darkening applied.

Depending on how you choose to build this, you may also want to check out custom navigation transitions in iOS 7. I don't know if that's required for this problem, but it might be.

Good luck!

Answer 2

You can try this:

var webView: WKWebView!

 override func viewDidLoad() {
       super.viewDidLoad()

        let url = URL(string: "https://yourwebsite.com")!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true  //so easy!
    }

    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
    }

Answer 3

override func viewDidLoad() {
    super.viewDidLoad()
    let url = NSURL(string: "https://www.whatever.com")
    let requestObj = NSURLRequest(URL: url!)
    myWebView.loadRequest(requestObj)



    //swipe left or right to go back or foward 
    var leftSwipe = UISwipeGestureRecognizer(target: self, action: Selector("handleSwipes:"))
    var rightSwipe = UISwipeGestureRecognizer(target: self, action: Selector("handleSwipes:"))

    leftSwipe.direction = .Left
    rightSwipe.direction = .Right

    view.addGestureRecognizer(leftSwipe)
    view.addGestureRecognizer(rightSwipe)


}



//swipe left to go forward
func handleSwipes(sender:UISwipeGestureRecognizer) {
    if (sender.direction == .Left) {
        myWebView.goForward()

    }
//swipe right to go backward
    if (sender.direction == .Right) {
         myWebView.goBack()

    }


}

Answer 4

webview.allowsBackForwardNavigationGestures = true