I am loading a html from the assets folder. It is positioned below an image-view. The code works, however it takes a second for the html file to appear on the device.
here is the code:
public class FgmIsChildAbuse extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
WebView mWebView;
mWebView = (WebView) findViewById(R.id.webviewm1);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.loadUrl("file:///android_asset/m1_section1_read.html");
ImageView ImageView1 = (ImageView) findViewById(R.id.ImageView1);
Resources res = getResources(); /** from an Activity */
ImageView1.setImageDrawable(res.getDrawable(R.drawable.images_eyes));
mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);
mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
}
}
Below is an example of one of the html files
<html>
<head>
<title>CFAB</title>
<meta name="viewport" content="width=300, initial-scale=1" />
<link rel="stylesheet" media="all" href="master.css" type="text/css" />
</head>
<body bgcolor=transparent>
<FONT COLOR="#000000" size = 3>
<div class="outer" data-role="page" data-theme="a">
<div class="main" data-role="content">
<div class="tab-content">
<div class="tab1 readtab">
<h3>Female Genital Mutilation (FGM) is Child Abuse</h3>
<p>Over <strong>100,000</strong> women in the UK have been <strong>victims</strong> of Female Genital Mutilation (FGM). The vast majority of these victims will have been subjected to this horrific form of abuse either <strong>before they came to the UK</strong> or they will have been taken, as children, to their parents' <strong>country of origin</strong> to undergo this abuse.</p>
<p>This awareness course is designed to help <strong>practitioners</strong> understand what FGM is as well as the context within which it takes place and the relevant legislation to combat it. Critically, it is to build <strong>confidence</strong> so that professionals are better prepared to identify those children most at risk of FGM and those who may have been victims of this type of abuse.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am loading some website in my android application using WebView and what I just want to do is after loading the page I want to automatically click the <button> with data-stage="premium"
here is my html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="switch-stage">
<div>
<button data-stage="normal">Normal</button>
</div>
<div>
<button data-stage="premium">Premium</button>
</div>
</div>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
$('#switch-stage button').on('click', function() {
var stage = $(this).data('stage');
});
</script>
</body>
</html>
This is what I've done in android.
webView.loadUrl("javascript:document.getElementById(\"switch-stage button\").click(\"premium\");");
but I think my loadUrl is not correct. (This is what I am seeing in different link that I've searched.)
Is it possible to do what I am asking, to automatically click the button so that the var stage will have a data.?
I hope someone will help, Thanks.
Try this:
public void onPageFinished(WebView view, String url)
{
// hide element by id LECLERC
view.loadUrl("javascript:(function() { " +
"document.getElementsById('Premium').click();"
//document.getElementById("switch-stage").children[1].click();
;})()");
}
I have a WebView in my Android App that is loading an HTML string using the loadDataWithBaseURL() method.
w = (WebView)findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
String html = "<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Smooth Scroll</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- stylesheets --> <style type="text/css"> body { max-width: 40em; width: 88%; margin-left: auto; margin-right: auto; } </style> </head> <body> <main id="top"> <nav> <hr> </nav> <section> <p> <strong>Ease-Out</strong><br> <a data-scroll href="#ANCHORLINK">Quad</a><br> </p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> <p id="ANCHORLINK"><a data-scroll href="#1##%^-bottom">SCROLL TO ANCHOR LINK!</a></p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> </html>"
w.loadDataWithBaseURL("http://bar",html,"text/html", "utf-8", "");
I want to use a android button to scroll to anchor link in webview. How to do it?
Your String html is broken. Because you've nested double quotes without the escape slashes.
Also, you need to make sure that you didn't nest your WebView inside a ScrollView in your layout. Because WebView has its own scroll function, and it might not work properly, if you nest it inside a ScrollView.
You can do it with an android Button as follows:
protected void onCreate(Bundle savedInstanceState) {
w = (WebView)findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
String html = "<!DOCTYPE html> <html lang=\"en\"> <head>....<body><p id=\"top\">Top of the page content</p>....</body></html>";
w.loadDataWithBaseURL("http://bar",html,"text/html", "utf-8", "");
Button topButton = (Button) findViewById(R.id.topButton);
topButton.setOnClickListener(TopButtonHandler);
Then outside the onCreate function:
View.OnClickListener TopButtonHandler = new View.OnClickListener() {
#Override
public void onClick(View v) {
w.loadUrl("javascript:document.getElementById(\"top\").scrollIntoView()");
}
};`
I got this to work with an html file in my assets folder. Which is a little different from loading a string html. But a string html should work the same way, as long as it doesn't have any errors, such as forgetting to put escape slashes for nested double quotes.
Instead of using an android Button, you can also get an html link to work this way inside your html file, located in your assets folder:
<!DOCTYPE html>
<head>
....
</head>
<body>
<p id="top">Content at the top of the page</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Go to Top
</body>
</html>
When you click on the Go To Top link, then the page will scroll to the top paragraph, provided that you didn't nest your WebView inside a ScrollView in your layout.
Guys I'm currently working on the development of an app using phonegap on eclipse, but I hit a bump when I'm trying to display an image, I have tried thousands of ways to modify my code, but the image just cannot be displayed, but when I browsed through others' coding, I didn't see much difference, will really appreciate it if you guys could help me figure out.
My code for a certain page is shown below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Us</title>
<link rel="stylesheet" href = "css/jquery.mobile-1.4.5.min.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js">
<script src = "js/jquery.mobile-1.4.5.min.js." type = "text/javascript" charset = "utf-8" src = "cordova-2.3.0.js"></script>
<script type = "text/javascript">
function onBodyLoad() {
document.addEventListener("deviceready", PhonegapLoaded, false);
}
function PhonegapLoaded(){
document.addEventListener("backbutton", function(e){
e.preventDefault();
alert("Back Button Pressed");
navigator.app.backHistory();
}, true);
}
</script>
</head>
<body onload = "onBodyLoad();">
<div data-role = "page" id = "aboutus">
Back
<div class="ui-btn-active" data-role="header" data-theme="b">
<h1>ABOUT US</h1>
</div>
<div data-role="content">
<img src="images/icon.png">
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
You must use this route:
<img src="images/icon.png">
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 am making an app in which i have to show hindi text which is coming in html means i have to show whole html page whose content is in hindi.Can anyone help me in this .Any help will be appreciated.My code is as follows:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
and html file is as follows:
<html>
<head>
<meta charset="ISO-8859-1">
<title>New test</title>
</head>
<body>
<body>
<p>
केवल उन व्यक्तियों के पात्र हैं जो हिन्दी के साथ 10 वीं कक्षा उत्तीर्ण की है
</p>
If you have text file copy the file in to assets folder.
Then read it from assets and using Webview you can display the content.
webview.loadUrl("file:///android_asset/hinditext.html");