i am trying to load only a specific element in my webview webpage ('contentbody').
but i dont know how to modify my code to load that only. i can block elements in my webview by using this simple javascript.
public void onLoadResource(WebView view, String url) {
super.onLoadResource(view, url);
// Removes element which id = 'mastHead'
view.loadUrl("javascript:(function() { "
+ "(elem = document.getElementById('smsform')).parentNode.removeChild(elem); "
+ "})()");
}
An option might be to use Jsoup, to load the HTML page from the website, extract the desired portion of the HTML, and then load just that into your WebView. A small example of how it could be done:
Document doc = Jsoup.connect("http://example.com/").get();
myWebView.loadDataWithBaseURL("http://example.com/", doc.select(".contentbody").first().outerHtml(), "text/html", "UTF-8", null);
With this, you use Jsoup to extract the first item with contentbody class from the HTML, and then directly load it into your WebView.
I am trying to get my app to sync itself with a website, and display only the table of a website. Example: Normal HTML framework, and the table is inside a div#table, so I did it pretty simple and built the HTML Framework:
String html = "<html> " +
"<head>" +
"</head>" +
"<body style=\"background-color: transparent\">" +
"?body" +
"</body>" +
"</html>";
And then I tried to replace the ?body with the table, but here's my problem: I have no clue how to do that and then load it into a transparent WebView. I found a little bit code online, and tried to get it working for my case, so here's that:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
List<String> links = new ArrayList();
setContentView(SliderCreator.createSlider(R.layout.activity_news, this));
wv = (WebView) findViewById(R.id.newsWebView);
wv.setBackgroundColor(Color.TRANSPARENT);
try {
String finalHTML = getIntent().getStringExtra("html");
if (!finalHTML.contains("<html>")) {
String css = "";
for(String link : links) {
css+=Utils.getHTML(link);
}
finalHTML = html.replace("?body", getIntent().getStringExtra("html")).replace("?css", css);
}
wv.getSettings().setJavaScriptEnabled(true);
//open URLs in external Browser
wv.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
}
});
wv.loadDataWithBaseURL("", finalHTML, "text/html", "UTF-8", "");
} catch(Exception e) {
Toast.makeText(this, "An error occured...", Toast.LENGTH_LONG).show();
}
But that doesn't work.. Can somebody help me out get that working for me?
(Btw.: I tried it with RegEx, didn't work, I tried it with JSoup, didn't work either...)
try using HTML Agility Pack if not working with RegEx
Please note, your RegEx might not work the desired way if the text contains nested table tags
I am using an android WebView and I want to load webpage on my android device but display only some parts of webpage, not the whole page.
Is this possible?
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
for those who still looking for a solution:
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url)
{
mWebView.loadUrl("javascript:(function() { " +
"document.getElementsByClassName('className1')[0].remove();
document.getElementsByClassName('className2')[0].remove();
document.getElementsByClassName('className3')[0].remove();" +
"})()");
}
});
webView.loadUrl(url);
In Kotlin in this way:
view.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView, url: String) {
view.loadUrl(
"javascript:(function() { " +
"var head = document.getElementsByClassName('header')[0].style.display='true'; " +
"var head = document.getElementsByClassName('art-bnr')[0].style.display='none'; " +
"var head = document.getElementsByClassName('container-box')[0].style.display='none'; " +
"var head = document.getElementsByClassName('blog-sidebar')[0].style.display='none'; " +
"var head = document.getElementsByClassName('footer-container')[0].style.display='none'; " +
"})()"
) } }
view.loadUrl(url)
I want to load youtube video to Android webview using iframe
here is my layout Xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:id="#+id/mainLayout">
<WebView
android:background="#android:color/white"
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
My code is:
public class WebTube extends Activity {
private WebView wv;
String html = "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 95%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/WBYnk3zR0os"
+ "?fs=0\" frameborder=\"0\">\n"
+ "</iframe>";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wv = (WebView)findViewById(R.id.webView);
wv.getSettings().setJavaScriptEnabled(true);
wv.loadDataWithBaseURL("", html , "text/html", "UTF-8", "");
}
}
Also I provide <uses-permission android:name="android.permission.INTERNET"/>
& android:hardwareAccelerated="true"
when I run this I didn't get any result its just showing a black screen
I tried this .but this provide me video on .3gp Quality . but I need the videos from youtube on original quality. That's why I am using iframe.
I try code using <object></object> and <video></video> instead of iframe. but it didn't solve my issue.
when I run this code on emulator it shows
Before Pressing Play Button
After Pressing Play button on video
I think we cannot stream videos on emulator since it is a virtual device
But when I run this on phone it's not even showing this result.
I try iframe with a document attach to it works fine on phone as well as emulator
String customHtml = "<iframe src='http://docs.google.com/viewer?url=http://www.iasted.org/conferences/formatting/presentations-tips.ppt&embedded=true' width='100%' height='100%' style='border: none;'></iframe>";
So please help me to load videos to this frame.
(I run it on phone). What's the problem?
also will iframe work on Android 2.1?
did any one tried Youtube Api ?
I have full customized ifram for youtube view
public class Act_VideoPlayer extends Activity {
WebView webView;
ProgressBar progressBar;
ImageView back_btn;
String video_url = "KK9bwTlAvgo", html = "";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_screen_youtube_video_screen);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
back_btn = (ImageView) findViewById(R.id.full_videoview_btn);
back_btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
webView.loadData("", "text/html", "UTF-8");
finish();
}
});
webView = (WebView) findViewById(R.id.webView);
progressBar = (ProgressBar) findViewById(R.id.progressBar);
if (video_url.equalsIgnoreCase("")) {
finish();
return;
}
WebSettings ws = webView.getSettings();
ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
ws.setPluginState(WebSettings.PluginState.ON);
ws.setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.reload();
if (networkUtil.isConnectingToInternet(Act_VideoPlayer.this)) {
html = getHTML(video_url);
} else {
html = "" + getResources().getString(R.string.The_internet_connection_appears_to_be_offline);
CustomToast.animRedTextMethod(Act_VideoPlayer.this, getResources().getString(R.string.The_internet_connection_appears_to_be_offline));
}
webView.loadData(html, "text/html", "UTF-8");
WebClientClass webViewClient = new WebClientClass(progressBar);
webView.setWebViewClient(webViewClient);
WebChromeClient webChromeClient = new WebChromeClient();
webView.setWebChromeClient(webChromeClient);
}
#Override
protected void onDestroy() {
super.onDestroy();
try {
webView.loadData("", "text/html", "UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
}
#Override
public void onBackPressed() {
super.onBackPressed();
try {
webView.loadData("", "text/html", "UTF-8");
finish();
} catch (Exception e) {
e.printStackTrace();
}
}
public class WebClientClass extends WebViewClient {
ProgressBar ProgressBar = null;
WebClientClass(ProgressBar progressBar) {
ProgressBar = progressBar;
}
#Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
ProgressBar.setVisibility(View.VISIBLE);
}
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
ProgressBar.setVisibility(View.GONE);
}
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
LogShowHide.LogShowHideMethod("webview-click :", "" + url.toString());
view.loadUrl(getHTML(video_url));
return true;
}
}
public String getHTML(String videoId) {
String html = "<iframe class=\"youtube-player\" " + "style=\"border: 0; width: 100%; height: 96%;"
+ "padding:0px; margin:0px\" " + "id=\"ytplayer\" type=\"text/html\" "
+ "src=\"http://www.youtube.com/embed/" + videoId
+ "?&theme=dark&autohide=2&modestbranding=1&showinfo=0&autoplay=1\fs=0\" frameborder=\"0\" "
+ "allowfullscreen autobuffer " + "controls onclick=\"this.play()\">\n" + "</iframe>\n";
LogShowHide.LogShowHideMethod("video-id from html url= ", "" + html);
return html;
}
}
As stated in the android Webview documentation,
HTML5 Video support
In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient.
For full screen support, implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback) and onHideCustomView() are required, getVideoLoadingProgressView() is optional.
This worked for me:
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
mWebView.loadData(frameVideo, "text/html", "utf-8");
mWebView.loadUrl("http://www.youtube.com/");
mWebView.setWebViewClient(new WebViewClient());
Try this its working fine..
mWebView = (WebView) findViewById(R.id.web);
String videoURL = "https://www.youtube.com/embed/R52bof3tvZs";
String vid = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" height=\"100%\" src=\""+videoURL+"\" type=\"text/html\" frameborder=\"0\"></iframe><body><html>";
WebChromeClient mWebChromeClient = new WebChromeClient(){
public void onProgressChanged(WebView view, int newProgress) {
}
};
mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mWebView.setWebChromeClient(mWebChromeClient);
mWebView.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
mWebView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()");
}
});
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAppCacheEnabled(true);
mWebView.setInitialScale(1);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
if (Build.VERSION.SDK_INT < 17) {
Log.i("GPSNETWORK", "<17");
} else {
Log.i("GPSNETWORK", Build.VERSION.SDK_INT+">=17");
mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
}
String myUrl = "<html><body style='margin:0px;padding:0px;'>\n" +
" <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>\n" +
" var player;\n" +
" function onYouTubeIframeAPIReady()\n" +
" {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}\n" +
" function onPlayerReady(event){player.mute();player.setVolume(0);player.playVideo();}\n" +
" </script>\n" +
" <iframe id='playerId' type='text/html' width='1280' height='720'\n" +
" src=\""+videoURL+"\"?enablejsapi=1&rel=0&playsinline=1&autoplay=1&showinfo=0&autohide=1&controls=0&modestbranding=1' frameborder='0'>\n" +
" </body></html>";
mWebView.loadData(""+Html.fromHtml(myUrl), "text/html", "UTF-8");
I'm no expert in Android webview, but I encountered similar problems with web page.
What I had to do was to use tag and made sure it had onclick="this.play(); in the tag. The onclick event was specifically for Android. Chrome, Safari, Firefox didn't need it.
For example:
<video id="video" width="320" height="240" autobuffer controls onclick="this.play();">
Without the onclick, Android browser would not work. Since webview is calling the browser, I suspect it's the same.
And make sure in the source tag you do NOT use codec attribute.
Hope this helps you.
It's not exactly a direct answer to your question, but I believe you might want to use the newly released Android Youtube API. It should allow adding youtube video playback into your apps, so you don't have to inject them into a webview in an iFrame.. That's just silly, and not all Android devices will have Flash installed :)
https://developers.google.com/youtube/android/player/
You can visit my question again. Iv'e created a function that gives you all of the youtube video's direct links (including hq links). Now you can use mp4 and so instead of the poor 3gp.
Using WebChromeClient allows you to handle Javascript dialogs, favicons, titles, and the progress:
wv = setWebChromeClient(new WebChromeClient());
It's working properly
My Java file
String path="<iframe src='https://www.youtube.com/embed/94zICkZLQpY' width='100%' height='100%' style='border: none;'></iframe>";
webView.loadData(path,"text/html","utf-8");
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
Here 94zICkZLQpY is the embedded code you will get in any youtube video
My normal youtube video link which is watchable is
https://www.youtube.com/watch?v=94zICkZLQpY&feature=youtu.be
I want to make an app which loads the content from the webpage into webview. I want to show only a particular thing in the entire webview, not the whole content of the webpage.
Here is an example. If I use: http://us.m.yahoo.com/w/search%3B_ylt=A2KL8xs0vUBQMg0AwAkp89w4?submit=oneSearch&.intl=us&.lang=en&.tsrc=yahoo&.sep=fp&p=digital+cameras&x=0&y=0 as the URL for the webview, it loads all the contents of the page on the webview. But I want to remove the banner of the page and show it on the webview of my application.
I have tried using adblocker using CSS tags, but that is not helping me. Please give me some idea for overcoming this problem.
Thanks.
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.
I got the solution to add this:
view.getSettings().setJavaScriptEnabled(true);
view.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url)
{
view.loadUrl("javascript:(function() { " +
"var head = document.getElementsByClassName('header')[0].style.display='none'; " +
"var head = document.getElementsByClassName('blog-sidebar')[0].style.display='none'; " +
"var head = document.getElementsByClassName('footer-container')[0].style.display='none'; " +
"})()");
}
});
view.loadUrl("your url");
Adding (var head =) looks like to hide my class in webview.
I hope this will be helpful for someone.
check Jsoup it provides an library which gives an easy way of extracting Html elements from a webpage
DefaultHttpClient client = new DefaultHttpClient();
HttpGet get = new HttpGet(url.toURI());
HttpResponse resp = client.execute(get);
String content = EntityUtils.toString(resp.getEntity());
Document doc = Jsoup.parse(content);
Elements ele = doc.select("div.classname");
This example executes an Http GET and then extracts an Div element with the class "classname" which you can then load in your webview