I'm trying to load html with CSS which has ID selector and the file doesn't load to the webview as expected.
This is the file which I tried to load:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
However when I tried the code below,it loads to the webview.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
I have enabled these properties on the WebView:
mWebView.setWebViewClient(new CustomWebViewClient());
mWebView.setWebChromeClient(new CustomWebChromeClient());
mWebView.getSettings().setSupportZoom(true); // ZoomControls
mWebView.getSettings().setBuiltInZoomControls(true); // Multitouch
mWebView.getSettings().setDisplayZoomControls(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(CONFIG.webviewEnableViewport());
mWebView.getSettings().setAllowFileAccess(true);
mWebView.requestFocus(View.FOCUS_DOWN);
mWebView.setHorizontalScrollBarEnabled(true);
mWebView.setVerticalScrollBarEnabled(true);
Can anyone help me on this?
I could solve the issue by using the base64 encoding.
String encodedHtml = Base64.encodeToString(myHtmlString.getBytes(),
Base64.NO_PADDING);
mWebView.loadData(encodedHtml, "text/html", "base64");
Related
I have and application, which displays html content from other sources. This content may contain iframe embedded videos. For special case of twitter videos the behavior is different and video remains blank after running.
The logcat shows message:
Refused to display 'videoUrlHere' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors *".", source: about:blank (0)
Example url is: https://twitter.com/i/videos/tweet/840948416742117377?embed_source=clientlib&player_id=0&rpc_init=1&language_code=en
The interesting thing is that this approach works on android 5 and lower.
Loading of content
mWebView.loadDataWithBaseURL("file:///android_asset/", mHtmlSource.toString(), "text/html", "utf-8", null);
Initialization of WebView:
mWebView.setWebViewClient(new MyWebViewClient());
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.addJavascriptInterface(new InjectedAppObject(), "InjectedAppObject");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(false);
webSettings.setLoadsImagesAutomatically(true);
Headers added to html:
<html lang=\"cs\" dir=\"ltr\">
<head>
<meta charset=\"utf-8\">
<meta name=\"keywords\" content=\"\">
<meta name=\"description\" content=\"\">
<meta http-equiv=\"Content-Security-Policy\" content=\"default-src * data: \'unsafe-inline\' \'unsafe-eval\'; frame-ancestors *; \">
<meta name=\"robots\" content=\"index,follow\">
<title>App title</title>
<link href=\"file:///android_asset/html/css/style.css\" rel=\"stylesheet\">
<script src=\"file:///android_asset/html/js/jquery.min.js\"></script>
<script src=\"file:///android_asset/html/js/app.js\"></script>
<script src=\"file:///android_asset/html/js/disposable-iframe.min.js\"></script>
<script src=\"file:///android_asset/html/js/iframe.js\"></script>
</head>
I need some help on how to inject CSS before showing WebView. Appreciate any help.
I need to inject CSS into WebView from assets, before the WebView shows.
You should load url contents manually to your html structure. put this code as page.html in your assets folder.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style type="text/css">
// your css code here
</style>
</head>
<body>
${body}
</body>
</html>
then in your java code:
String pageBody; // get page body by httpUrlConnection or okhttp or...
String html = FileUtils.readFromAssets("page.html", context);
// replace pageBody with ${body} in your html file
html = html.replace("${body}", pageBody);
WebView webView = (WebView) getView().findViewById(R.id.webView);
webView.getSettings().setAllowFileAccess(true);
WebSettings settings = webView.getSettings();
settings.setDefaultTextEncodingName("utf-8");
settings.setJavaScriptEnabled(true);
webView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", null);
I have a html file with css file. I want to load it into Webview. In the css file, i set font-weight for some elements in html file. But the problem is the webview cannot show the bold text that i set. In the list devices i tested: Nexus S, Nexus 4, Nexus 5, Nexus 7, Samsung S3, LG, only Nexus 7 can display the bold text.
I research many times but still no result. Do you have any ideas for this. Thanks you.
Here is my html file:
<link href="css/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<section id="answer_box"><!--解答ボックス-->
<p class="explain_title">正解</p>
<p class="answer_p"><span class="answer_no">イ</span> </p>
</section>
<section class="question_title_box">
<p class="question_main_title"><span class="question_no">１</span>リスニングテスト（放送による指示に従って答えなさい。）</p>
</section><!--question_title_box終わり-->
Here is my css file
p.question_title_box{
font-size: 15px;
font-weight: 600
}
Here is how i load html file:
wvQuestion = (WebView) findViewById(R.id.question_content);
WebSettings webSettings = wvQuestion.getSettings();
webSettings.setJavaScriptEnabled(true);
String url = "test.html";
wvQuestion.loadUrl(url);
assuming that your css file is stored in assets/css, you should be able to load it through loadDataWithBaseURL. E.g.
wvQuestion.loadDataWithBaseURL("file:///android_asset/css/", url, "text/html", "UTF-8", null);
I am working on an application with many html pages. I have created these in the raw folder on Eclipse.
I'm going to be making many html files and I want to have only one location for the css file which I want to call in each of the html files. This application works in such a way that the
loadData method displays the html page as shown below:
webview.loadData(readTextFromResource(R.raw.gen1), "text/html", "utf-8");
Id appreciate any ideas.
you can copy html and css files in your project assets and load html file from asset to webview like below code:
WebView wv;
wv = (WebView) findViewById(R.id.webView1);
wv.setBackgroundColor(0);
wv.setBackgroundResource(android.R.color.black);
wv.setWebChromeClient(new WebChromeClient());
wv.setWebViewClient(new WebViewClient());
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setPluginsEnabled(true);
wv.loadUrl("file:///android_asset/Index_Animation/test.html");
like below screen shot:
and refer css in html file below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./style.css" type="text/css" media="screen"><!--This line refer the css file-->
</head>
<body bgcolor="#000000">
<div class="col_left">
<div class="logo">
<div class="circles">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<center>
<img src="./Untitled.png" />
</center>
</div>
</div>
</body></html>
I found some Android RTMP libraries (like this : http://rtmpdump.mplayerhq.hu/).
The problem is that there is no accurate documentation on how we can use it.
In my case, I have a simple RTMP live audio stream (ex: rtmp://myserver/myapp/myliveaudio).
What is the easiest way to read it in my Android app?
Please, I don't want links: I need some pieces of code or some accurate step-by-step explanation.
Thank you very much.
It is unfortunately non-trivially difficult to do. Right now your best bet is to look at the code in http://code.google.com/p/android-rtmp-client/: specifically look at http://code.google.com/p/android-rtmp-client/source/browse/trunk/example/com/ryong21/example/recorder/RecorderClient.java and http://code.google.com/p/android-rtmp-client/source/browse/trunk/example/com/ryong21/example/recorder/Recorder.java. These walk through taking in a streamed MP3 file and recording its contents to an FLV file on disk.
You would need to modify the RecorderClient.java file (specifically around line 193) to play the audio data out the speakers.
Not sure if this helps, but... I was able to do something similar (rtmp - streaming video) using Flash, so you need Android 2.2+ for this.
Anyway, I just wrote an HTML page displaying the flash video then opened the page in a WebView.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
height:100%;
}
#altContent{
width:100%;
height:100%;
}
</style>
<title>YOUR TITLE HERE!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.HaloColor = "0x0086db";
flashvars.ToolTips = "true";
flashvars.AutoPlay = "true";
flashvars.VolumeLevel = "50";
flashvars.CaptionURL = "YOUR CAPTION HERE";
flashvars.Title = "YOUR TITLE HERE";
flashvars.Logo = "";
flashvars.SRC = "rtmp://YOUR STREAM URL HERE";
flashvars.BufferTime = "5";
flashvars.AutoHideControls = "false";
flashvars.IsLive = "true";
var params = {};
params.wmode = "transparent";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "L3MP";
swfobject.embedSWF("http://media-player.cdn.level3.net/flash/v1_1_1/Level3MediaPlayer.swf", "altContent", "100%", "100%", "10.1.0","http://media-player.cdn.level3.net/flash/v1_1_1/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<center> <BR><BR><span style="color:red"><b>Please Install Adobe Flash Player</b>
</span><BR><BR>
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</center>
</div>
</body>
</html>
</script>
</html>
OK... now just save that in your assets folder in your project
and open it with something like this in your activity :
String LocalFile = "file:///android_asset/YOUR_HTML_FILE.htm";
WebView webView = (WebView) findViewById(R.id.YOUR_WEB_VIEW);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginsEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setAllowFileAccess(true);
webView.setBackgroundColor(Color.BLACK);
webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.loadUrl(LocalFile);
Its a bit of a work around... Hope it works for you. CDub.