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.
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 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>
I read all possible questions/response on stackoverflow, but i still can't do what i would like.
I created an application to show News
1. Used**Thoolika.ttf** Unicode font.
2.Now I am using **AnjaliOldLipi.ttf** font
3.Older data was in the form **c¬¥Vvp¢: d¡...**.
4.New data is in the form **സ ; ൂ ; പ ; ് ; പ ;** .
My problem is I can't justify this news inside a webview.For this,I am using html given below.
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8 />
<meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable = yes /><style>#font-face { font-family: 'Anjali';src: url('file:///android_asset/fonts/**AnjaliOldLipi.ttf'**);}body { font-family: 'Anjali';}</style></head><body style=font-family:Anjali;margin:5px;><div style=padding:5px;**text-align:justify;** >
<span style=color:#3070AC;font-family:Anjali;font-size:20px;font-weight:bold;text-decoration:none;>NEWS TITLE</span><br>
<div style=width:100%;text-align:right;padding-top:2px;padding-right:2px;color:#BCBCBC;font-family:monospace;font-size:11px;><i>NEWS DATE</i></div></div>
<div style=padding-top:5px;padding-left:5px;padding-right:5px;color:#000000;font-family:Anjali;font-size:14px;text-decoration:none;text-align:;>
NEWS CONTENT
</div></body></html>
How can i align both left and right side of this webview(justify).
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 have seen various discussions on the problem of serving WebView pages from assets, none of which seemed definitive.
I want to be able to use a webview to display html (and included css) files stored in the project assets.
I have found that wv.loadUrl("file:///android_asset/html_no_copy/demo_welcome.html") displays that file okay, but links in demo_welcome.html, either local (no url prefixing the file name) or absolute - the same form as fed to loadUrl - don't work. They get a "Web page not available" error displayed on the view.
WebView wv = (WebView)this.findViewById(R.id.splashWebView);
wv.loadUrl("file:///android_asset/html_no_copy/test.html"); // Works
or
wv.loadUrl("file:///android_asset/html_no_copy/demo_welcome.html"); // Works
But neither of the following links in demo_welcome.html work:
CLICK HERE<p>
OR HERE
I know I can get around this by writing a content provider, but that seems extreme.
I want this to work from SDK 1.6 (4) on up.
Does anyone know if this can be done with just HTML, or does one need to kluge up some code to load the data?
Well, I found something that seems to work (on 1.6 and 2.2), in spite of a warning that it would recurse.
I also discovered that a css style-sheet link inside the first and second page both work without the following intercept. Odd and it makes me a bit nervous. Thoughts?
Here's the code:
WebView wv = (WebView)this.findViewById(R.id.splashWebView);
wv.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
view.loadUrl(url);
return true;
}
});
wv.loadUrl("file:///android_asset/html_no_copy/demo_welcome.html");
Here's the file contents:
demo_welcome.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demo Html</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<H1>Testing One Two Three</H1>
CLICK HERE<p>
OR HERE
</body>
</html>
test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="test.css" />
<title>Insert title here</title>
</head>
<body>
<H1>TEST.HTML</H1>
</body>
</html>
instead of loadUrl, try using the loadDataWithBaseURL method:
wv.loadDataWithBaseURL("fake://not/needed", html, mimeType, encoding, "");