Question

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'标签）

Answer 1

如果我理解你的话，你想要设置第一个div而不是第二个div，它来自你的ajax调用。

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

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

Answer 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   Verou！）

Answer 3

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

$（＆＃34;＃your_div_id＆＃34）。追加（response_from_server）

在没有css冲突的情况下加载ajax响应（html内容数据）

3 个答案: