防止Jquery Dialog內容的CSS應用於主窗口

Question

在我的Web應用程序中，我編寫了一個跨域Ajax調用，它從另一個域中獲取HTML頁面。這個新提取的頁面正在使用以下代碼在jQuery對話框中呈現。$('#previewDialog').html(response).dialog('open'); 這會在對話框中正確呈現響應。但是，響應（HTML頁面）中也包含一些CSS樣式。這些樣式（通常爲BODY，INPUT等）正在應用到我的主窗口（父頁面）並扭曲頁面的完整視圖。

當打開HTML頁面的對話框時，由於HTML頁面中使用的CSS（AJAX調用的響應）會將父頁面的視圖完全扭曲，並將其應用於所有組件。當我關閉對話框時，父頁面恢復正常。

無論如何，我可以通過它來防止在對話框中顯示的HTML頁面的CSS，不會應用到我的父頁面嗎？

Answer 1

微不足道的答案：從您拉入的網頁中的所有內容都被封裝在一個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限制，然後將其作爲內部樣式表插入頁面的其他位置。