返回没有CSS / JS干扰的AJAX HTML响应

Question

我对服务器进行了AJAX调用，该服务器将返回HTML响应。此HTML响应将包括HTML，CSS和JS。我想在当前页面上嵌入此响应，以便用户能够查看响应。我尝试了以下内容，但响应中的CSS应用于我当前的页面。有没有办法阻止CSS应用到我当前的页面？

请注意，我无法控制服务器返回的CSS。服务器可以返回针对所有元素类型p { color:red }的CSS :(

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

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

Answer 1

标出标签

假设响应的CSS是一种风格：

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

这将从字符串中删除所有<style>标记

<小时/> 您还可以删除所有style属性：

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

<小时/> 如果他们是<link>

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

您可以随时将这些组合起来以获得所需的结果。

<小时/>

iFrame的

您可以使用iframe来获得结果：

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

<小时/>

划掉<style>和<link>示例

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

Answer 2

更好地使用CSS选择器会有所帮助。也许将结果包装在容器div中并为其添加一个类。然后你的css可以用来只定位那个div中的元素。

Answer 3

我通过创建iframe并使用jQuery替换其内容，扩展了Braks使用iframe的想法： brew install proj 。

有关此问题的更多讨论，请访问：Create an <iframe> element and append html content to it with jQuery