So in my iPad app, i'm hoping to add a custom Twitter feed using UIWebView but wanted to use a custom CSS file
Is this possible?
if so how would i go about do it?
Cheers
3
-
So you don't control the web page's css?wottle– wottle2014-11-26 21:57:41 +00:00Commented Nov 26, 2014 at 21:57
-
No it'll be a third party website like twitter or googleNick Emmerson– Nick Emmerson2014-11-26 22:03:41 +00:00Commented Nov 26, 2014 at 22:03
-
Wrapping a 3rd party web page is a bit fragile because they can change the page elements at any time. It certainly is possible, but safer if you control the source page. See my answer below.wottle– wottle2014-11-26 22:05:06 +00:00Commented Nov 26, 2014 at 22:05
Add a comment
|
2 Answers
You can forcefully inject javascript into a UIWebView at any time, modifying the underlying HTML. You can either use basic javascript or, if a library like jQuery is loaded, use it:
[webView stringByEvaluatingJavaScriptFromString:@"$('.className').css('color','#f00')"];
You can also load entire scripts and modify, add, delete tags -- you just have to write the javascript to accomplish the changes.
5 Comments
Nick Emmerson
Thanks, but i've barely touched javascript/jquery, so wouldn't know where to start with writing the code, but again thanks
Matt H
Do you already have a specific custom CSS file you want to use?
Nick Emmerson
no but I could make one in dreamweaver if the custom cad thing is poss, all I've been doing so far was to use developer tools in chrome and add css in there
Matt H
Do you have a web URL you are hitting? Post it and I'll show you the code to change one of its elements in a UIWebView.
Nick Emmerson
hey it's a twitter ember widget
You can get the DOMDocument from the webview,, and then add the css to it that way.
DOMDocument* domDocument=[webView mainFrameDocument];
DOMElement* styleElement=[domDocument createElement:@"style"];
[styleElement setAttribute:@"type" value:@"text/css"];
DOMText* cssText=[domDocument createTextNode:@"body{font-weight:bold;}"];
[styleElement appendChild:cssText];
DOMElement* headElement=(DOMElement*)[[domDocument getElementsByTagName:@"head"] item:0];
[headElement appendChild:styleElement];
