Return AJAX HTML Response Without CSS/JS Interference

Question

I have an AJAX call to a server that will return an HTML response. This HTML response will include HTML, CSS, and JS. I would like to embed this response on my current page so the user will be able to view the response. I have tried the following, but the CSS from the response is applied to my current page. Is there any way to prevent the CSS from being applied to my current page?

Note that I have no control over the CSS returned by the server. The server can return CSS that targets all element types p { color:red } :(

$.ajax ({
    type: TYPE,
    contentType: CONTENT_TYPE,
    url: URL,
    headers: {
        firstName: firstName,
        lastName: lastName
    }
})
.done( function(msg) {
    $('#response').html(msg);
})

<div id="response"></div>

"Is there any way to prevent the CSS from being applied to my current page?" You could embed the other resource as an iframe. — Felix Kling
– Felix Kling, Commented May 3, 2015 at 23:58
Jon, if you put your response HTML into an iframe, any CSS that gets put in there won't affect the rest of the page. iframe technique has a lot of drawbacks though. It does seem like you're better off stripping out the CSS from the response, or if you're up for a challenge you could try dynamically rewriting the CSS so it's all targeted into a particular DIV. — braks
– braks, Commented May 4, 2015 at 0:02
@braks ... no way to know what's simpler based on information given. No usage of the content is given — charlietfl
– charlietfl, Commented May 4, 2015 at 0:03
@Jon you wouldn't put the ajax response in iframe, would point iframe src to a url on server that would populate it as full html page — charlietfl
– charlietfl, Commented May 4, 2015 at 0:07
You could point the iframe at a page on your own server, which has the AJAX and processing in it. So when you look at that URL on your own server it looks just like the other page (except with the changes you made) You can dynamically change the src attribute of the iframe - you could exploit this to pass URL parameters or something if you need some control like that. — braks
– braks, Commented May 4, 2015 at 0:08

Cjmarkham · Accepted Answer · 2015-05-03 23:56:04Z

1

Better use of CSS selectors would help. Perhaps wrap the result within a container div and add a class to that. Then your css can be used to only target elements within that div.

answered May 3, 2015 at 23:56

Cjmarkham

9,7336 gold badges52 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Over a year ago

Unfortunately, I don't have any control over the server's CSS.

Cjmarkham Over a year ago

In that case I would go with @vihan1086 answer and remove the css, then you could apply your own to the elements.

Downgoat · Accepted Answer · 2015-05-04 03:58:34Z

1

Striping out tags

Assuming the response's CSS is in a style:

var _html = $('<div>' + msg + '</div>'); // Parses response string
_html.find('style').remove(); // Selects and removes style tags
msg = _html.html(); // Makes it a string again

This will strip all <style> tags from a string

You can also strip all style attributes:

var _html = $('<div>' + msg + '</div>');
_html.find('[style]').removeAttr('style');
msg = _html.html();

If their are <link>

var _html = $('<div>' + msg + '</div>');
_html.find('link[rel=stylesheet]').remove();
msg = _html.html();

You can always combine these to get your desired result.

iFrames

You could use iframe to get your result:

$('#response').attr('src', 'data:text/html;charset=utf-8,' + encodeURIComponent(msg));

Striping out `<style>` and `<link>` example

.done(function(msg) {
    var _html = $('<div>' + msg + '</div>');
    _html.find('style, link[rel=stylesheet]').remove();
    $('#response').html(_html.html());
})

edited May 4, 2015 at 3:58

answered May 3, 2015 at 23:55

Downgoat

14.4k7 gold badges48 silver badges72 bronze badges

3 Comments

Cjmarkham Over a year ago

Why are you wrapping the response msg in another div? It would be easier to just do $(msg)

charlietfl Over a year ago

@CarlMarkham otherwise you have to get outerHTML

Downgoat Over a year ago

@CarlMarkham I need that so I can get it back as an html string. outerHTML support is touchy

Community · Accepted Answer · 2017-05-23 12:06:36Z

0

I extended on Braks idea of using an iframe by creating an iframe and replacing its content with jQuery: $('<iframe id="someId"/>').appendTo('#someDiv').contents().find('body').append(response);.

More discussion about this can be found at: Create an <iframe> element and append html content to it with jQuery

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered May 4, 2015 at 15:51

Jon

8,59131 gold badges99 silver badges151 bronze badges

Collectives™ on Stack Overflow

Return AJAX HTML Response Without CSS/JS Interference

3 Answers 3

2 Comments

Striping out tags

iFrames

Striping out `<style>` and `<link>` example

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Striping out tags

iFrames

Striping out <style> and <link> example

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Striping out `<style>` and `<link>` example