ajax 加载和冲突的 css 类和 ID答案

【问题标题】：ajax load and conflicting css classes and IDsajax 加载和冲突的 css 类和 ID
【发布时间】：2021-09-08 10:24:47
【问题描述】：

我正在构建一个简单的单页应用程序，其中包含一些我想用我的 wordpress 网站中的内容填充的 div。

为了做到这一点，我使用 ajax 加载并将加载的内容插入到我的 div 中：

$('#my_div').load("https://example.com/page/")

问题是我的应用程序使用来自 bootstrap 的 css，这与我的 wordpress 网站上的 css 不同。但是，由于类和 ID 相同，加载页面中的 css 正在替换我应用程序中的 css。

我怎样才能避免这个问题？我不想使用 iframe。是否可以自动重命名导入页面中的每个类和 ID 名称，以免冲突？

【问题讨论】：

您的意思是正在加载的内容包含您不想加载的<style> 元素和/或<link> 元素？如果不需要它们，您可以从源中删除它们吗？我想目前尚不清楚具体发生了什么或您具体要问什么。你能详细说明一下这个例子吗？
当我从 wordpress 网站加载时，内容包括许多样式。该 wordpress 网站上使用了 Bootstrap，它的类与我的应用程序中的类冲突。

【解决方案1】：

我认为最好的方法是使用 get 而不是 load，如果可能的话，用 replace 替换里面的类。在您的情况下，您可以这样做：

$.get("https://example.com/page/", function(data) {
     // replace classes
     $("#my_div").replaceWith(data);
});

【讨论】：