get img src with jsoup - android
This is my html
<script src="/ClientScripts/swfobject.js" language="javascript" type="text/javascript"> </script>
<div class="contentDetails">
<div id="ctl00_MainContentPlaceHolder_ContentDetailsBodyDivision" class="body">
<div align="justify">
<p align="center"><img width="500" height="352" alt="MVM315" src="/UserUpload/Image/1(825).jpg" /></p>
<p align="center"><img width="500" height="352" alt="MVM315" src="/UserUpload/Image/2(598).jpg" /></p>
How can i get {src="/UserUpload/Image/1(825).jpg"} with jsoup ?
I have this code but not working
Document doc = Jsoup.parse(html);
Elements mElements = doc.select("div[id^=ctl00_MainContentPlaceHolder_ContentDetailsBodyDivision]");
Result = mElements.get(0).tagName("img").toString();
try this:
Element imageElement = document.select("img").first();
String absoluteUrl = imageElement.absUrl("src"); //absolute URL on src
String srcValue = imageElement.attr("src"); // exact content value of the attribute.
More info here: http://jsoup.org/cookbook/extracting-data/working-with-urls
What about:
Element img = document.select("img").first()
String src = img.attr("src");
For more info see this: http://jsoup.org/cookbook/extracting-data/attributes-text-html
Related
I want to fetch some info from a webpage in android studio
I want to fetch sometitle and somelink from HTML code below for my android app ... HELP ME :( <div class="proper-list list-group page-cat-wrap"> <figure class="col-md-12 thumb-vertical"> <div class="col-xs-4 thumb-image"> <a href="/somelink.html" class="image-hover"> <img alt="SomeTag" src="/storage/images/100/2382.jpg"> </a> </div> <figcaption class="col-xs-8"> <h3> <a href="/somelink.html"> SomeTitle </a> </h3> <p> <a href="/secondlink.html"> SomeText </a> </p> </figcaption> <div class="clearfix"></div> <div class="mobile-only icon-right"> <a href="/somelink.html"> <i class="fa fa-chevron-right" aria-hidden="true"></i> </a> </div> I heard of jsoup but won't able to get links with jsoup.
Jsoup is the best library to parse any of HTML content or document,
Here is the link and example,
http://jsoup.org/
Example
private void parsehtmlPage(){
File input = new File("/yourFolder/home.html");
Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/");
Element elementId = doc.getElementById("elementId");
Elements ankerLinks = elementId.getElementsByTag("a");
for (Element link : ankerLinks) {
String linkHref = link.attr("href");
String linkText = link.text();
}
}
Extract Image source from nested div and a tag in JSOUP
<div class='ym-gbox adds-header'>
<a href='javascript:(void);' >
<a href="http://epaper.thedailystar.net/" target="_blank">
<img src="http://epaper.thedailystar.net/images/edailystar.png" alt="edailystar" style="float: left; width: 100px; margin-top: 15px;">
</a>
<a href="http://www.banglalink.com.bd/celebrating10years" target="_blank" style="display:block;float: right;">
<img width="490" height="60" src="http://bd.thedailystar.net/upload/ads/2015/02/12/BD-News_490x60.gif" alt="banglalink" >
</a>
</a>
</div>
This is the html portion. From here I want to extract the image source of image tag with source address src="http://epaper.thedailystar.net/images/edailystar.png" using jsoup in android. But I failed. If anyone give the answer I will be thankful to him.
Here is my code
Document document = Jsoup.connect(url).get();
Elements img = document.select("div[class=ym-gbox adds-header]").first().select("a[href=http://epaper.thedailystar.net/] > img[src]");
String imgSrc = img.attr("src");
Since you didn't mention url, i assume url is http://epaper.thedailystar.net/index.php
Document doc = Jsoup.connect("http://epaper.thedailystar.net/index.php").timeout(10*1000).get();
Elements div = doc.select("div.logo");
Elements get = div.select("img");
System.out.println(get.attr("abs:src"));
Output :
http://epaper.thedailystar.net/images/edailystar.png
You have to iterate through elements to choose the element that suits your needs. Like so:
Elements elements = document.getElementsByTag("img");
for (Element element : elements) {
if (element.attr("src").endsWith("png")) {
System.out.println(element.attr("src"));
}
}
check this value with the Android Webview After saving the values to the local storage on the Android browser
I'm going to check this value with the Android Webview After saving the values to the local storage on the Android browser.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<script>
window.onload = function(){
loadStorage();
document.querySelector("form").onsubmit = saveStorage;
};
function saveStorage(){
var saveId = document.getElementById("saveId").checked;
var userId = document.getElementById("userId").value;
if(saveId){
window.localStorage.setItem("userId", userId);
window.localStorage.setItem("userIdSaved", true);
}else{
window.localStorage.removeItem("userId");
window.localStorage.setItem("userIdSaved", false);
}
}
function loadStorage(){
var userId = window.localStorage.getItem("userId");
document.getElementById("userId").value = userId;
if(userId!=null){
document.getElementById("saveId").checked = true;
}
}
</script>
</head>
<body>
<h1>Login(Web Storage)</h1>
<form action="login.php" method="post">
<fieldset>
id: <input type="text" name="id" id="userId" autocomplete="off">
<input type="checkbox" id="saveId">Save ID<br>
pass: <input type="password"><br>
<input type="submit" value="login">
</fieldset>
</form>
</body>
</html>
However, if you run a webview not output the value stored in the Android browser.
Check the values by executing the Webview, but does not save local storage in
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<?
$Id = $_POST['id'];
?>
<script>
window.onload = function(){
var userId = window.localStorage.getItem("userId");
alert(userId);
init();
};
function init(){
var list = document.getElementById( "list");
list.innerHTML = "";
for( var i = 0; i < localStorage.length ; i++){
var key = localStorage.key(i);
list.options[list.options.length] = new Option(localStorage[key],key);
}
}
</script>
<body>
<h1>Result</h1>
<p>Welcome to <?=$Id?> </p>
home<br/>
<select id = "list" size= "10"></ select>
<fieldset >
key : <input type = "text" id= "key"/>
value : <input type = "text" id= "value"/>
</fieldset >
</body>
</html>
To show the value stored in the Webview, how can I do?
I am not sure you can use web localStorage inside WebView. However you may store values in the application preferences. Implement corresponding methods in your custom Javascriptinterface. See https://stackoverflow.com/a/10389678/527759
Removing div tag from url loaded from webview android
I am loading a url into webview using web.loadUrl(url);. Now i want to remove part the body content when the url finished loading.
Data from the url is as follows :
<html>
<body>
<div class="header" data-role="header" data-theme="a">
<a data-icon="back" class="header-icon" data-iconpos="notext" href="mymob-web-mobile/restricted/menu.xhtml" data-ajax="false"> <span>Back</span> </a>
<!--Title-->
<h1>???help.main.title???</h1>
</div>
<div id="well">Hello World</div>
<body>
</html>
I want to remove this part in the url
<div class="header" data-role="header" data-theme="a">
<a data-icon="back" class="header-icon" data-iconpos="notext" href="mymob-web-mobile/restricted/menu.xhtml" data-ajax="false"> <span>Back</span> </a>
<!--Title-->
<h1>???help.main.title???</h1>
</div>
After some researh i come to this solution:
web= (WebView)findViewById(R.id.web);
web.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url)
{
web.loadUrl("javascript:var con = document.getElementByTagName('<div class=\"header\" data-role=\"header\" data-theme=\"a\"> '); " +
"con.style.display = 'none'; ");
}
});
web.clearCache(true);
web.clearHistory();
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
web.loadUrl(Constant.URL_AIDE, headers);
But the div element is not being removed.
a summery is , div to remove
<div class="header" data-role="header" data-theme="a">
<a data-icon="back" class="header-icon" data-iconpos="notext" href="mymob-web-mobile/restricted/menu.xhtml" data-ajax="false"> <span>Back</span> </a>
<!--Title-->
<h1>???help.main.title???</h1>
</div>
expected result
<html>
<body>
<div id="well">Hello World</div>
<body>
</html>
any idea please
You can use getElementsByClassName() to access the div. Here is my solution please try it.
web.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url){
web.loadUrl("javascript:document.getElementsByClassName('header')[0].style.display=\"none\";");
}
})
Your JavaScript is incorrect. There is no such thing as getElementByTagName, other than getElementById other getElements... functions return a list of nodes. It should be something like:
[].slice.call(document.getElementsByClassName("header")).forEach(function(element) {element.style.display = 'none';});
ImageMap not working in android emulator
I have created an image map using multiple images and mouseover function which works fine normally on descktop. I simply loaded the url of the html created in the webview in android and the image map is not working!! ..
Please help as i am actually stuck :(
<script language="javascript">
a1 = new Image(107,36);
a1.src = "a1.jpg";
a2 = new Image(107,36);
a2.src = "a2.jpg";
a3 = new Image(107,36);
a3.src = "a3.jpg";
a4 = new Image(107,36);
a4.src = "a4.jpg";
//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}
//end hiding -->
</script>
<BODY>
<img src="a1.jpg" name="a"
style="border: none;" usemap="#shapes"/>
<map name="image" id="shapes">
<area shape="poly"
coords="322,280,322,276,319,273,316,272,312,267,308,261,306,258,308,248,304,246,307,240,312,239,316,238,322,240,325,241,328,235,335,232,342,232,350,233,356,238,357,244,358,249,360,253,365,257,370,258,374,260,374,267,370,273,370,279,364,286,357,292,354,295,347,295,339,298,331,300,326,299"
href="javascript:clicked_on('triangle');"
title="Triangle" alt="Aryll" onMouseOver="hiLite('a','a2','Your Comment Here')" onMouseOut="hiLite('a','a1','')"/>
locater.print("Entering hiLite");
<area shape="poly"
coords="281,217,296,216,302,217,311,211,310,201,317,199,321,191,330,193,337,189,333,174,333,164,344,159,358,161,360,154,351,147,349,137,376,139,399,136,405,137,418,147,419,167,401,192,400,201,404,212,393,223,390,238,385,250,375,259,361,253,358,248,355,235,341,231,329,233,324,240,312,238,304,245,294,242,292,238,275,235,279,226"
href="javascript:clicked_on('triangle');"
title="Triangle" alt="Aryll" onMouseOver="hiLite('a','a3','Your Comment Here')" onMouseOut="hiLite('a','a1','')"/>
<area shape="poly"
coords="283,141,298,139,302,133,312,131,323,139,336,139,344,136,351,143,351,151,359,155,355,161,340,160,333,167,334,175,336,184,336,190,330,192,323,191,316,197,315,199,310,201,309,207,308,214,294,215,281,215,300,201,298,186,306,173,301,167,289,170,285,157,280,145"
href="javascript:clicked_on('triangle');"
title="Triangle" alt="Aryll" onMouseOver="hiLite('a','a4','Your Comment Here')" onMouseOut="hiLite('a','a1','')"/>
<area shape="poly"
coords="266,340,269,336,270,331,276,331,278,333,288,332,290,335,286,336,284,348,283,344,279,346,278,348,271,346,266,341,266,338,270,337,270,331,275,330"
href="javascript:clicked_on('triangle');"
title="Triangle" alt="Aryll" onMouseOver="hiLite('a','a5','Your Comment Here')" onMouseOut="hiLite('a','a1','')"/>
</map>
</BODY>
</HTML>
You have mistake in html code. attr usemap should refer to name attr of map instaed of id <img src="a1.jpg" name="a" style="border: none;" usemap="#image"/>
Try to use WebView http://developer.android.com/guide/webapps/webview.html Hope it will help you.