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>

How much css is in the response? is it feasible to refactor the CSS? — Jon P, May 03 '15 at 23:57
*"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, May 03 '15 at 23:58
what's to elaborate on? an iframe is simple to implement if the source is a full page with wrapping `` tag etc — charlietfl, May 04 '15 at 00:00
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, May 04 '15 at 00:02
@braks ... no way to know what's simpler based on information given. No usage of the content is given — charlietfl, May 04 '15 at 00:03
Sorry, let me clarify. How would I put the HTML Response inside the iframe? — Jon, May 04 '15 at 00:05
@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, May 04 '15 at 00:07
But my AJAX call also passes in headers (sorry, I didn't add that in my example as I didn't think that was necessary). Will this still work? — Jon, May 04 '15 at 00:08
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, May 04 '15 at 00:08
@braks Good idea. I went ahead and improved your idea by using jQuery to create the iframe and appending the AJAX response within the body `$('#my-iframe').contents().find('body').html(response)`. if you can reply to this question with your answer, i can accept your response as an answer! — Jon, May 04 '15 at 00:32

Downgoat · Answer 1 · 2015-05-04T03:58:34.960

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());
})

Why are you wrapping the response `msg` in another div? It would be easier to just do `$(msg)` — Cjmarkham, May 03 '15 at 23:59
@CarlMarkham I need that so I can get it back as an html string. `outerHTML` support is touchy — Downgoat, May 04 '15 at 00:02

score 1 · Answer 2 · answered May 03 '15 at 23:56

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 03 '15 at 23:56

Cjmarkham

9,484
5
48
81

Unfortunately, I don't have any control over the server's CSS. – Jon May 03 '15 at 23:58
In that case I would go with @vihan1086 answer and remove the css, then you could apply your own to the elements. – Cjmarkham May 04 '15 at 00:02

score 0 · Accepted Answer · edited May 23 '17 at 12:06

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 '17 at 12:06

Community

1
1

answered May 04 '15 at 15:51

Jon

8,205
25
87
146

Return AJAX HTML Response Without CSS/JS Interference

3 Answers3

Striping out tags

iFrames

Striping out <style> and <link> example

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