加载没有css冲突的ajax响应（html内容数据）答案

【问题标题】：Load ajax response (html content data) without css conflict加载没有css冲突的ajax响应（html内容数据）
【发布时间】：2016-05-01 10:55:38
【问题描述】：

1) 我有 2 个不同的域 i) www.xxx.xom ii) www.yyy.com

2) 然后通过 ajax 将服务器调用从 xxx 页面发送到 yyy 页面

3) 获取 yyy 到 xxx 页面的 html 内容（内容包含带有内联 css 的 html 数据）

4) 现在我想将响应（html 内容）附加到我的 DOM 但没有 css 冲突（这意味着响应内容不受父 css 影响）

注意：没有 IFRAME 是否可以渲染

示例代码：

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    var ajax_response = "<div style='color: blue;'>I m blue </div>"; // sample server reponse
    document.getElementById("child").innerHTML = ajax_response;
  }
}

#parent div {
  color: red !important;
}

<div id="parent">
  <div>I m red</div>
  <div id="child"></div>
  <div>I m red too</div>
</div>

输出：红色将应用于“我是蓝色”文本（因为有 '!important' 标签）

【问题讨论】：

欢迎来到 Stack Overflow。因此，您希望添加的 HTML 和内联样式不受要添加到的页面样式的影响？我认为应该使用!important。
没有“开箱即用”的解决方案。您必须根据周围容器作为选择器前缀手动重置包含的 html 的所有不需要的样式。
感谢您的评论。但是这里我们不能为内联 css 添加 !important （因为最终用户提供的数据
@Twisty 请查看示例代码。
这不会发生：stackoverflow.com/questions/5080365/…

标签： javascript jquery html css ajax

【解决方案1】：

如果我理解正确，您希望设置第一个 div 而不是第二个 div 的样式，这来自您的 ajax 调用。

#parent:first-child {
  color: red !important;
}

这只会影响你的 div #parent 的第一个 div

【讨论】：

我想避免只有一个 div 的父 css
一种方法是使用 IFRMAE，但我需要其他方法来解决这个问题。是否有其他解决方案可以在不冲突的情况下附加 html 内容？
您在原始帖子中说：“现在我想将响应（html 内容）附加到我的 DOM 但没有 css 冲突（这意味着响应内容不受父 css 影响）”。我的代码正是这样做的。我不明白你现在想达到什么目的？
请运行上面的代码 sn-p 并查看输出。两个语句都用红色打印，但第二个语句有蓝色（内联样式）。原因：父 div 具有带有 !important 标记的红色样式。当我们使用 iframe 而不是 div 时，它永远不会发生，因为 iframe 不继承父 css 我需要相同的功能，如果可能的话不使用 iframe

【解决方案2】：

我得到了这个工作：https://jsfiddle.net/Twisty/sc6n560t/

HTML

<a id="act" href="">Action</a>

<div id="parent">
  <div>I'm red</div>
  <div id="child"></div>
  <div>Other Text</div>
</div>

CSS

#parent div {
  color: red;
}

div#child.content {
  all: default;
}

JQUERY

$(document).ready(function() {
  $("#act").click(function(e) {
    e.preventDefault();
    var ajax_response = "<div style='color: blue;'>I'm blue </div>"; // sample server reponse
    $("#child").html(ajax_response);
  });
});

这个答案是在这个问题的更新中找到的：CSS to prevent child element from inheriting parent styles

编辑：CSS 工作组正在做某事：

div.content { all: default; }

不知道，何时或是否会由浏览器实现。

编辑 2：截至 2015 年 3 月，除 Safari 和 IE/Edge 之外的所有现代浏览器已实施： https://twitter.com/LeaVerou/status/577390241763467264（谢谢，@Lea 维鲁！）

【讨论】：

【解决方案3】：

在您的 xxx 页面中创建一个 div。将此添加到您的脚本中..

$("#your_div_id").append(response_from_server)

【讨论】：