Geek asks and answers

JQuery AJAX loads stylesheets in Safari into <style> tags

What I am doing is that I have an intermediate page setup that acts like a hub for other pages, these other pages can either be specified statically (inside the hub page) or dynamically by supplying a URL that then goes to AJAX call.

My problem comes only with Safari and Safari. When the url'd page has <style>s, my script selects all of them and places them inside the <head>hub page, because where they should have been, and the rest of the page is selected for using a wrapper and loaded into the hub. Safari does not like to see new styles. And the safari does not see them if I leave them as they were inside <div>.

So what I'm looking for is a workaround for this so that Safari can see that there are styles for classes. I tested Firefox4, Chrome, Opera, and even Internet Explorer 9, and they all work.

Example on request: (this is inside the full ajax function)

responseText = jqXHR.responseText;
var dummy = $("<div></div>");
$('head').append(dummy.html(responseText).find("style"));
+3
source share
2 answers

Gregg, I just tried the following in the interactive safari console

var style=$("<style></style>");
$("head").append(style);
style.text("* { color: white !important; }");

which then turned all the text on the page to white. So my suggestion is to dynamically create a style tag, add it, and then add to the text from another style tag.

I think this is likely to do what you want.

+2
source

I had a similar problem with the latest Safari website.

Related SO

Chrome, IE 10 Safari.

0

More articles:


All Articles