通過AJAX加載頁面並執行javascript和CSS

Question

我已經搜索了一段時間，但我不知道如何通過AJAX加載整個頁面並仍然執行所有javascript和css。

通常，我只得到純文本而沒有任何CSS。 有沒有辦法做到這一點？ 我嘗試了jQuery.get，jQuery.load和jQuery.ajax，但沒有一個真的能像那樣工作。

Answer 1

我已經解決了以下類似的問題。

1. 通過ajax下載網頁
2. 遍歷並找到任何<script>和</script>標記
3. 從這些標簽中獲取內容作為文本
4. 創建新的<script>元素並在其中插入代碼
5. 將標簽附加到您的網頁

另一件事是，您將需要以某種方式調用該腳本。.我已經這樣完成了：

我設置了標准化的函數名稱，例如將腳本附加到頁面后要調用的initAddedScript回調。 與不再需要代碼（及其變量，..）時調用的deinitScript相同。

我必須說這是一個糟糕的解決方案，這可能意味着您的應用程序體系結構很差，就像我以前遇到的那樣：）

與css相同，但是您不需要任何處理程序。 只需將style標簽附加到文檔頭即可。

Answer 2

我有不同的解決方案。 您可以使用iframe嘗試一下。 使用jQuery將包含所有相關代碼的iframe腳本附加到頁面的某些部分（例如div ）。 這可能為您完成包括CSS之類的操作；

$('<iframe src="your_page.html"/>').appendTo('#your_div');

或者您可以嘗試類似的方法；

$('<iframe src="your_page.html"/>').load(function(){
      alert('the iframe is done loading');
}).appendTo('#your_div');

Answer 3

如果您加載的頁面沒有任何樣式數據，則外部樣式表必須具有相對於調用文檔而言不正確的相對路徑。 請記住，這不是iFrame-您不是在文檔中構建外部文檔，而是將一個文檔合並到另一個文檔中。

另一個問題是，加載完整的頁面還會加載doctype ， html ， head和body標簽-現代瀏覽器通常會用到它，但是結果是不確定的，因為它不是有效的HTML，無法將一個文檔塞入另一個文檔中。 這使我無法使用它的第三個原因： head 外部的CSS鏈接 無效，以及因隨意的文檔中文檔拼貼導致的head放置錯誤。

我要做的是合規性（和正確的渲染），這將在成功回調中實現：

1. 將所有link元素復制到新的jQuery元素。
2. 復制head部分中所有script的內容
3. 從加載的文檔的body標簽中復制.html()內容
4. 將link元素（在步驟1中復制）追加到宿主文檔的head
5. 使用復制的腳本內容創建一個新的script標簽，並將其粘貼在head
6. 完成！

復雜？ 我猜有點，但是如果您真的想使用AJAX加載整個頁面，那是您唯一的選擇。 無論您做什么，它都將導致頁面JavaScript出現問題，尤其是應該在初始加載期間運行的代碼。 您對此無能為力。 如果有問題，則需要重寫源頁面以更便於加載，或者可以弄清楚如何使iFrame滿足您的需求。

首先值得考慮是否將外部CSS加載到宿主文檔中是否可行。

Answer 4

我想您正在尋找這樣的東西：

your page div --> load --> www.some-site.com

快速搜索后，最接近的解決方案似乎是“ 和 ”的解決方案：將網站加載到DIV中

您必須運行Web服務器並使用以下內容創建proxy.php頁面：

然后，您的JQuery load（）函數應如下所示：

$("#your_div_id").load("proxy.php?url=http://some-site.com");

NB。 我已經測試了此解決方案，並且它不應從目標頁面加載所有CSS，可能您必須重新創建它們。 例如，由於身份驗證策略，我認為不會加載存儲在遠程服務器上的圖像文件。
您也將只能查看目標頁面，而無法瀏覽目標站點。

無論如何，我希望這可以是您解決方案的一步。

Answer 5

1. 使用Ajax以文字形式獲取整個網頁

2. document.open(); document.write(this.responseText); document.close();

   要么

   document.documentElement.outerHTML = this.responseText;

但是，如果生成的網頁位於另一個目錄中，則需要在原始網頁中更改css和js頁面的路徑。