I'm working on an Android app, which loads a HTML page and shows it in a webview. The problem is I want to add my custom css (the loaded HTML hasn't any CSS or link to a css). How do I add the custom css to the HTML code using jsoup? I cant modify the html. And how does the webview can open it afterwards? Thank you
1
-
It's not an identical question. I can't load it with loadDataWithBaseURL because there isn't any link to a ccs in the HTML. So i can't refer to a css in the local App.PixelPW– PixelPW2011-04-13 18:37:04 +00:00Commented Apr 13, 2011 at 18:37
Add a comment
|
3 Answers
Several ways. You can use Element#append() to append some piece of HTML to the element.
Document document = Jsoup.connect(url).get();
Element head = document.head();
head.append("<link rel=\"stylesheet\" href=\"http://example.com/your.css\">");
Or, use Element#attr(name, value) to add attributes to existing elements. Here's an example which adds style="color:pink;" to all links.
Document document = Jsoup.connect(url).get();
Elements links = document.select("a");
links.attr("style", "color:pink;");
Either way, after modification get the final HTML string by Document#html().
String html = document.html();
Write it to file by PrintWriter#write() (with the right charset).
String charset = Jsoup.connect(url).response().charset();
// ...
Writer writer = new PrintWriter("/file.html", charset);
writer.write(html);
writer.close();
Finally open it in the webview. Since I can't tell it from top of head, here's just a link with an example which I think is helpful: WebViewDemo.java. I found the link on this blog by the way (which I in turn found by Google).
7 Comments
PixelPW
Whats is the right charset? What I have to put in there "//..." ?
BalusC
The right charset is the
Jsoup.connect(url).response().charset();. The //... is just the code you need to get the html.PixelPW
Thank you but when I put this to eclipse it says: "Add throws decleration" ... public void main(String... args) throws FileNotFoundException, UnsupportedEncodingException{ try{ ... What I have to do?
BalusC
Just add
throws IOException to the method signature or put it in try-catch. Did you explore the suggestions which Eclipse gave when you click the red bullet?PixelPW
Okay I've put a try-catch. But now It says in the webview: The Web page at file:///android_asset/file.html could not be loaded as: The request file was not found. file.html
|
Probably the easiest way is to search and replace on the HTML text to insert your custom styles, before loading it into your WebView. I do this in my app BBC News to restyle the news article page slightly. My code looks like this:
text = text.replace("</head>",
"<style>h1 {font-size: x-large;} h1, div.date, div.storybody, img {margin:4px; padding:4px; line-height:1.25;}</style></head>");
See how I search and replace on the end head tag (including my own </head> tag in the replaced segment. This ensures that the new snippet goes in the right pace on the page.
Comments
There a a few ways to include ccs in html
Tis i use if you have it stored as a external file:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
If You want to put it stight i the html file:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Or if you wnat to modify a singel tag:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
*Edit
Any of thees examples shouldn't have any problem whit displaying.
Ref: W3 Schools CSS
2 Comments
PixelPW
The problem is that I load the HTML form a webpage, so I can't change the HTML. I want to add code with jsoup and then load my own css.
KilledKenny
I see, Your question was misleading sounded like you had control over the html. I edited the question to point others in the right way. I myself don't have any exp. whit jsoup