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

Posted 2023-02-19

【中文标题】加载没有css冲突的ajax响应（html内容数据）

【英文标题】：Load ajax response (html content data) without css conflict

【发布时间】：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 请查看示例代码。

这不会发生：***.com/questions/5080365/…

【参考方案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)