Android WebView : Remove pop-out option in google drive/doc viewer

Question

I am loading the pdf documents in WebView through appending the pdf url to google doc api

http://docs.google.com/gview?embedded=true&url=myurl

Pdf is loading just fine but the webpage displays two options - Zoom-in and Pop-Out. Is there any way to disable/hide pop-out option by sending some param? Any help would be appreciated.Thanks in advance!

Cedar

Looking for the same thing but it seems that there is no documentation for the google docs viewer at all. – Slip

Yeah. It seems so. Even I couldn't find any doc. – Cedar

Answer 1

You can add this callback and in a result "pop-out" button will be removed.

@Override
    public void onPageFinished(WebView view, String url) {

        super.onPageFinished(view, url);
        mWebView.loadUrl("javascript:(function() { " +
                "document.querySelector('[role=\"toolbar\"]').remove();})()");
    }

Note: If you want to now show this button at all, make your web view visible after applying last javascript code.

Tenorite

I found you solution useful then an accepted answer, but have you noticed while progressbar is running, it still shows Pop-out option, so anyone can tap on it... and perform further actions. Do you have any solution for same. – Deerhound

Answer 2

//initialze WebView
webview = (WebView) findViewById(R.id.fullscree_webview);

//set the javascript enable to your webview
webview.getSettings().setJavaScriptEnabled(true);

//set the WebViewClient
webview.setWebViewClient(new WebViewClient() {

//once the page is loaded get the html element by class or id and through javascript hide it.
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            webview.loadUrl("javascript:(function() { " +
                    "document.getElementsByClassName('ndfHFb-c4YZDc-GSQQnc-LgbsSe ndfHFb-c4YZDc-to915-LgbsSe VIpgJd-TzA9Ye-eEGnhe ndfHFb-c4YZDc-LgbsSe')[0].style.display='none'; })()");
        }
    })

Gavotte

awesome. very genius solution – Symbolism

It is just hiding the option,but that view is still there. Is there any other option to hide the view?? – Horrific

@SarithaG : I did lot of research in this Issue and I dont think there is option to hide that view. All we can do is to using CSS code hack we can hide that view. – Gavotte

Thnq for your response..Can you post that CSS code..? – Horrific

@ Jaffar Hi.. I've tried your solution to achieve that same. But i couldn't hide it. i've posted my question with the code at this #42383484. Could you please check it and suggest me any idea. Thanks in advance. – Neighborhood

@Neighborhood : let me check and ill update you soon :) – Gavotte

Answer 3

mWebview = (WebView) findViewById(R.id.your_web_view_id);

//do the javascript enable to your webview
mWebview .getSettings().setJavaScriptEnabled(true);

//set the WebViewClient
mWebview .setWebViewClient(new WebViewClient() {

//add this line to Hide pop-out tool bar of pdfview in pagLoadFinish
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
             mWebview .loadUrl("javascript:(function() {document.querySelector('[class=\"ndfHFb-c4YZDc-Wrql6b\"]').remove();})()")
        }
    })

This will remove the pop-out toolbar which is the redirection in chrome browser

Happy Coding

Rightism

this worked for me. Thanks @Darshan Khatri – Diastema

Answer 4

To strictly not allow anyone to click on "pop-out"

1. Keep the WebView hidden from the beginning by using

   webview.setVisibility(View.GONE)
   

2. Inside the webview

   webView.setWebViewClient(new WebViewClient() {
           @Override
           public void onPageFinished(WebView view, String url) {
               super.onPageFinished(view, url);
               webView.loadUrl("javascript:(function() { " +
                       "document.querySelector('[role=\"toolbar\"]').remove();})()");
               webView.setVisibility(View.VISIBLE);
           }
       });
   

Simple yet effective! Cheers

Clemons

Answer 5

100% working solution, i am using below ans

    binding!!.webView.webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
            if(url.contains("https")){ // idea1 : back button to exit!
                // finish()
            }
            return true
        }
        override fun onPageFinished(view: WebView, url: String) {


// idea 2:  to hide button icon & background
    
            binding!!.webView.loadUrl("javascript:(function() { " +
                    "document.getElementsByClassName('ndfHFb-c4YZDc-GSQQnc-LgbsSe ndfHFb-c4YZDc-to915-LgbsSe VIpgJd-TzA9Ye-eEGnhe ndfHFb-c4YZDc-LgbsSe')[0].style.display='none'; " +
                    "document.getElementsByClassName('ndfHFb-c4YZDc-Wrql6b')[0].setAttribute('style','width:0px');})()")
        }
    }

xml: idea 3

<WebView
        android:layout_marginStart="-30dp"
        android:layout_marginEnd="-30dp"
        
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Output:

Buttocks

Answer 6

Here is the code to disable that:

<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/0ByzS..." width="640" height="480"
frameborder="0" scrolling="no" seamless="" allowfullscreen="allowfullscreen"></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"></div>
</div>

Erasure