Detect If Page Is Loaded Inside Wkwebview in JavaScript

Detect if page is loaded inside WKWebView in JavaScript

You can check for the existence of window.webkit.messageHandlers which WKWebKit uses to receive messages from JavaScript. If it exists, you're inside a WKWebView.

That combined with a simple user agent check should do the trick:

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
var isWKWebView = false;
if (window.webkit && window.webkit.messageHandlers) {
    isWKWebView = true;
}

How can I detect when an element is visible after loading website in WKWebView?

First of all You need to inject next script to detect appearence of elements via mutations observer:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log('mutation.type = ' + mutation.type);
      for (var i = 0; i < mutation.addedNodes.length; i++) {
        var node = mutation.addedNodes[i];
        if (node.nodeType == Node.ELEMENT_NODE && node.className == 'stop-time') {
            var content = node.textContent;
            console.log('  "' + content + '" added');
            window.webkit.messageHandlers.stopTimesLoaded.postMessage({ data: content });
        }
      }
    });
  });
observer.observe(document, { childList: true, subtree: true });

Then You need to subscribe for event 'stopTimesLoaded':

contentController.add(self, name: "stopTimesLoaded")

And finally add code to process data in

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)

Detect if you web page is viewed inside a WebView of an app?

Here's a JSFiddle that answers this question:

var standalone = window.navigator.standalone,
        userAgent = window.navigator.userAgent.toLowerCase(),
        safari = /safari/.test( userAgent ),
        ios = /iphone|ipod|ipad/.test( userAgent );

if( ios ) {

        if ( !standalone && safari ) {

                document.getElementById( 'where-am-i' ).textContent = 'browser';

        } else if ( standalone && !safari ) {

                document.getElementById( 'where-am-i' ).textContent = 'standalone';

        } else if ( !standalone && !safari ) {

                document.getElementById( 'where-am-i' ).textContent = 'uiwebview';

        };

} else {

        document.getElementById( 'where-am-i' ).textContent = 'not iOS';

};

https://jsfiddle.net/ThinkingStiff/6qrbn/

Detect if user is using webview for android/iOS or a regular browser

Detecting browser for iOS devices is different from the Android one. For iOS devices you can do it by checking user agent using JavaScript:

var userAgent = window.navigator.userAgent.toLowerCase(),
    safari = /safari/.test( userAgent ),
    ios = /iphone|ipod|ipad/.test( userAgent );

if( ios ) {
    if ( safari ) {
        //browser
    } else if ( !safari ) {
        //webview
    };
} else {
    //not iOS
};

For Android devices, you need to do it through server side coding to check for a request header.

PHP:

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "your.app.id") {
    //webview
} else {
    //browser
}

JSP:

if ("your.app.id".equals(req.getHeader("X-Requested-With")) ){
    //webview
} else {
    //browser
}

Ref:detect ipad/iphone webview via javascript

detect ipad/iphone webview via javascript

This uses a combination of window.navigator.userAgent and window.navigator.standalone. It can distinguish between all four states relating to an iOS web app: safari (browser), standalone (fullscreen), uiwebview, and not iOS.

Demo: http://jsfiddle.net/ThinkingStiff/6qrbn/

var standalone = window.navigator.standalone,
    userAgent = window.navigator.userAgent.toLowerCase(),
    safari = /safari/.test( userAgent ),
    ios = /iphone|ipod|ipad/.test( userAgent );

if( ios ) {
    if ( !standalone && safari ) {
        //browser
    } else if ( standalone && !safari ) {
        //standalone
    } else if ( !standalone && !safari ) {
        //uiwebview
    };
} else {
    //not iOS
};

---

Related Topics