Display a Part of the Webpage on the Webview Android

Display a part of the webpage on the webview android

Thank You for the answer Zyber. I have solved it using injection of JavaScript in the code for WebView in android.

final WebView webview = (WebView)findViewById(R.id.browser);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url)
{
webview.loadUrl("javascript:(function() { " +
"document.getElementsByTagName('header')[0].style.display="none"; " +
"})()");
}
});
webview.loadUrl("http://code.google.com/android");

This solved my purpose and it is easy to use to.

How to display a part of the webpage on the webview android

Your are loading your html code without the proper structure (so all definitions in head are lost, like CSS references) and without the initial document (or loading with base url) all relative paths are broken.

<div class="darewod"> <a title="Workout of the Day" href="/workouts/lower-abs-workout.html" rel="alternate"><img src="/images/grid/wod/2016/wod_nov8.jpg" alt="Workout of the Day"></a> </div>

What you could do: replace the body of your document with your selected element, therby preserving the structure and information regarding base:

Example Code

WebView wv;
Handler uiHandler = new Handler();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

wv = (WebView)findViewById(R.id.webView);
wv.setWebViewClient(new MyWebViewClient());

new BackgroundWorker().execute();

}

// load links in WebView instead of default browser
private class MyWebViewClient extends WebViewClient {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return false;
}

@RequiresApi(21)
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl(request.getUrl().toString());
return false;
}
}

private class BackgroundWorker extends AsyncTask<Void, Void, Void> {

@Override
protected Void doInBackground(Void... arg0) {
getDarewod();
return null;
}

public void getDarewod(){

try {
Document htmlDocument = Jsoup.connect("http://darebee.com/").get();
Element element = htmlDocument.select("#gkHeaderMod > div.darewod").first();

// replace body with selected element
htmlDocument.body().empty().append(element.toString());
final String html = htmlDocument.toString();

uiHandler.post(new Runnable() {
@Override
public void run() {
wv.loadData(html, "text/html", "UTF-8");
}
});
} catch (IOException e) {
e.printStackTrace();
}
}

}

Android WebView:How to display only part of webpage

To solve this you need to remember, how webview works.
Which is some kind of embed 'browser' view.
You can solve it like this:

  1. Making your own http get request and read string response.
  2. Manipulate received string response - in your case inject Javascript code
  3. Load manipulated code to the web view.

To demonstrate an example I'll use HttpRequest class that I wrote to support android 22+ (since apache's package deprecated).

Step one: request and read String response

String response=new HttpRequest("http://somedomain.com").prepare().sendAndReadString();

Step Two: manipulate response before loading

result+="<script>onload=function(){document.getElementById('sidebar').style.display='none';}</script>";

Step Three: load it to the web view

wv.loadData(result, "text/html", "UTF-8");

Simplified example for everything togather:

new AsyncTask<String, Void, String>(){
protected String doInBackground(String[] params) {
try {
return new HttpRequest(params[0]).prepare().sendAndReadString();
} catch (Exception e) {
Log.e("***Web View - manipulated content - ERROR***", e.getMessage());
return null;//to promote null further
}
}
protected void onPostExecute(String result) {
if(result==null)return;//Error logged, don't load anything
result=result.concat("<script>onload=function(){document.querySelector('#sidebar').style.display='none';}</script>");
wv.loadData(result, "text/html", "UTF-8");
}
}.execute("http://www.soccernews.com/teams/psg/");

How to show a part of the website in the WebView in Android

I tried each and every answers on stack overflow to achieve the answer for my question, but none of them worked for me, there were slight changes which needed to be done in the code to achieve this.
Today I got the answer to my own question.

To show some parts of the website we have to change the code as:

webView1.setWebViewClient(new WebViewClient() {

@Override
public void onPageFinished(WebView view, String url)
{
webView1.loadUrl("javascript:(function() { " +
"document.getElementById('footer').style.display='none'; " +
"document.getElementsByClassName('logo')[0].style.display='none'; " +
"})()");

}
});
webView1.loadUrl("your url");

when you are using getElementById then remove the [0] and when using getElementsByClassName then use [0] after the id or class name respectively.
Also if you want to show the website part then use style.display='block' and if you want to remove the part then use style.display='none' , hope that my answer and explanation is helpful.

Show only certain parts of a web page in a web view, AndroidStudio?

I solved it!

using

mWebView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView webView, String url)
{
webView.loadUrl("javascript:(function() { " +
"document.getElementsByClassName(//classname//)[index of document].style.display='none'; " +
"})()");
}
});

How to display some part of webpage in android webview?

I think what you want to do is remove some content from your HTML page and then display it in the WebView. This is possible via javascript so just before you display the page add some javascript code that will remove the elements you don't want.

LIKE

final WebView mWebView = (WebView) findViewById(R.id.mWebViewId);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url)
{
mWebView.loadUrl("javascript:(function() { " +
"document.getElementById('tableid')[0].style.display='none'; " +
"})()");
}
});
mWebView.loadUrl(youUrl);

Just replace document.getElementsByTagName('tableid') with document.getElementsByTagName('theElementYouWantToRemove') for every element and you're set. Original solution can be found at Display a part of the webpage on the webview android

Android WebView: display only some part of website

You can do this by extending WebViewClient and injecting some javascript which will render your web Page

public class MyWebClient extends WebViewClient {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}

@Override
public void onPageFinished(WebView view, String url) {
view.loadUrl("javascript:your javascript");
}
}
.........
final MyWebClient myWebViewClient = new MyWebClient();
mWebView.setWebViewClient(myWebViewClient);

For hiding elements use view.loadUrl("javascript:document.getElementById(id).style.display = 'none';)

More info In Android Webview, am I able to modify a webpage's DOM?



Related Topics



Leave a reply



Submit