0

在我的 Web 应用程序中，我编写了一个跨域 ajax 调用，它从不同的域获取 HTML 页面。这个新获取的页面正在使用以下代码在 jQuery 对话框中$('#previewDialog').html(response).dialog('open'); 呈现 这将在对话框中正确呈现响应。但是，响应（HTML 页面）中也有一些 CSS 样式。这些样式（通常是 BODY、INPUT 等）被应用到我的主窗口（父页面）并扭曲了页面的完整视图。

当带有 HTML 页面的对话框打开时，由于 HTML 页面中使用的 CSS（AJAX 调用的响应）应用于所有组件，父页面的视图完全扭曲。当我关闭对话框时，父页面会恢复原状。

无论如何，我可以防止在对话框中显示的 HTML 页面的 CSS 不应用于我的父页面？

4

1 回答 1

0

简单的答案：将您拉入的页面中的所有内容都包装在一个 div 中，该 div 具有其他地方未使用的类。修改该页面的 .css，使其仅适用于该类的 div 中的元素。

编辑：如果您无法控制原始页面的 css，事情会变得有些复杂。但是，您的问题是您将 HTML（包括 css 链接）直接注入到您的页面中。相反，请尝试以下操作：

  • 获取其他页面的 HTML。使用 html() 命令将其放入您不用于其他任何操作的一侧的 div 中。
  • 使用 jquery DOM 命令进入该 div。抓住麻烦链接内的页面部分，并将其拉到该$('#previewDialog')位置。销毁工作空间 div 的内容。如果您需要保留 javascript 或 css，请将其输入到页面的其他位置（如有必要，请修改 - 就像使用 div 包装器一样）。

现在，这仅在您被馈送的页面没有以任何频率更改其 css 或 javascript 时才有效。

同一事物的另一个版本 - 当您将其作为响应（字符串格式）时，使用字符串操作工具来删除 css 引用，而不是使用 DOM 命令从中提取您需要的内容。

同一事物的更复杂/更困难的版本（尽管更健壮）：使用字符串命令切出 css 引用（与备用版本一样），然后使用该 css 引用进行另一个调用以获取 .css 文件。使用 .css 文件上的字符串命令添加最初描述的 div-wrapper 限制，然后将其作为内部样式表插入到页面的其他位置。

于 2012-08-23T13:01:17.693 回答