JavaScript/Jsoup - Get background-image url from "i class"

Question

So I'm loading a webpage in my app's webview and there's an HTML i class="img profimage" and it has a background-image url and that's my target...

I want to get that target either with JavaScript or using Jsoup...

What I tried so far with Jsoup is this:

public class GetImage extends AsyncTask<String, String, String> {

protected String doInBackground(String... strings) {

Document document = null;

try {

document = Jsoup.connect(url).get();

} catch (IOException e) {

e.printStackTrace();

}

String temp = document.select("i.img.profpic").first().getElementsByAttribute("style").toString();

return temp.substring(temp.indexOf("(") + 1, temp.indexOf(")"));

}

 

protected void onPostExecute(String result) {

Log.d("ChatScreen", result);

Toast.makeText(ChatScreen.this, result, LENGTH_SHORT).show();

}

}

But I'm getting NPE... I don't know how to get background-image url of an i class using JavaScript... I can find plenty of examples on web for how to get it for div using ids

HTML structure of page is similar to this:

<div ....>
<div ....>
<i class="img profimage" style="background-image: url("url here");"/>
</div>
</div>

@HarishKamboj yeah because then I want to load it in an ImageView using Glide so I need url as string to pass it to Glide method.. — Asama, Jan 26 '17 at 20:31

score 0 · Answer 1 · edited May 23 '17 at 12:16

Check this Answer may be this will work but I didn't try this. The JS function is written bellow in evaluateJavascript() which will read style attribute then you can use substring method to get the URL.

webview.evaluateJavascript(
        "(function() { return (document.getElementsByTagName('i')[index].getAttribute('style')); })();",
         new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String html) {
                Log.d("HTML", html); 
                // now use substring to get url.....
            }
    });

Hope this help you.

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Referencing this answer, you could try something like below (assuming it's the only/first element with the class profimage, otherwise change the index, i.e. [n], where n is the index). Alternatively, just give the element a unique id and use document.getElementById('imgid') and remove the [0]. Wrapped it in a function in case you want to call it on a specific event.

function getUrl() {
    var img = document.getElementsByClass('profimage'),
    style = img[0].currentStyle || window.getComputedStyle(img[0], false),
    bi = style.backgroundImage.slice(5, -2);
    return bi;
 }

Slicing will remove url(" before and ") after the URL itself. Note that this returns the full url.

If that doesn't work, you can try style = img.style, in lieu of the longer expression in the code above, since the background image is added with inline css in the element itself (<i ... style="background-image: url("url here");"/>). This will return the url in the inline style, in this case url here.

edited May 23 '17 at 12:16

Community

1
1

answered Jan 26 '17 at 21:47

pithonsmear

115
2
7

Hey, Now that I check back the webpage's HTML I was wrong about "background-image" tag but it's simple "background: #222222 url("url here")"... I'm sorry... Can you please provide code for this? – Asama Jan 27 '17 at 15:11
@Asama should be mostly the same, just change `backgroundImage` to `background`, and use a different parameter: `slice(13, -2)` – pithonsmear Jan 27 '17 at 17:41
and background tag is in style.css file of page so it isn't embedded with the line... Still same? I tried different methods including yours and they are working fine in jsfiddle but returning null in webview... I don't know what's the issue.. – Asama Jan 27 '17 at 17:47
@Asama Yes, the code in my answer (with changes from previous comment) should work (i.e. `currentStyle`), but you can try just using`style` as I suggested below the code. I see the [WebView reference](https://developer.android.com/reference/android/webkit/WebView.html) says JavaScript is disabled by default, maybe you have to enable it (assuming you have, just checking)? – pithonsmear Jan 27 '17 at 18:05
You can also try removing the `|| window.getComputedStyle()` or `img[0].currentStyle ||` and see if that helps – pithonsmear Jan 27 '17 at 18:28
yeah I enabled JavaScript and my other JavaScript functions are working well like injecting CSS in webpage but this one is not working well... I'm printing the returned string and it is null/empty... I will try tomorrow your updated sol.. – Asama Jan 27 '17 at 18:31

JavaScript/Jsoup - Get background-image url from "i class"

2 Answers2