如何使用javascript捕獲完整的網頁

我將JavaScript代碼注入到當前正在查看的頁面中，用戶命令此腳本使DOM發生更改。在交互結束時，用戶可能想要保存該頁面，以便他/她稍後可以查看/編輯它。我可以記住用戶所做的DOM更改，但如果原始頁面（源代碼）發生更改，我將無法爲用戶恢復此頁面。這就是爲什麼我想將更改後的頁面發送到我的服務器。我應該能夠完全恢復它，並且頁面的行爲應該與其執行的方式完全相同（包括腳本和媒體）。如何使用javascript捕獲完整的網頁

此外，我不能在用戶頁面存儲媒體（資源限制），所以我想我必須在各種腳本中解析和修改媒體到全局URL/URI的所有地址/引用/鏈接（HTML/CSS/JavaScript的）。

現在的問題是，是否有一個庫/框架/ jQuery的擴展，可以幫助我實現這一目標？

其他，什麼是正確的/專業的方式來做到這一點？

來源

2011-03-25 Hardbug

$('body').html() 
$('head').html() 
$('html').html()

下載firebug，並在此頁面的控制檯窗口中試用。我看到了正確的數據。

來源

2011-03-25 13:07:13 Martin

由於您使用的是jQuery，因此您可以嘗試$("html").html();，只需確保在再次輸出時添加相應的<html>標記。

來源

2011-03-25 13:07:23

我有沒有這是正確的，你正在建立一種CMS，讓用戶在Contenteditable模式下編輯整個頁面（不只是單獨的內容塊）？

我肯定會建議尋找像ckeditor/tinymce等解決方案......因爲自己這樣做將是一個可怕的痛苦。

來源

2011-03-25 13:07:51

@Sydenam的答案應該可以很好地保存整個HTML頁面。

同時，這也是重要，我會建議你考慮一個潛在的安全問題這裏。事實上，用戶可以在DOM中注入任何他想要的東西，並保存它，例如在遠程服務器上發送機密信息的令人討厭的Javascript函數。

所以，在我看來，這樣做的一個專業的方式將是獻給DOM的PART只對使用，讓說<div id='editable_div'>，你可以加載使用$（「＃editable_div」）。 load（'your_url'，參數等），然後使用另一個AJAX調用保存。

當保存它時，你可以解析這塊HTML和確保沒有什麼討厭的與一些正則表達式（如標籤）。

希望它能幫助，

問候，

來源

2011-03-25 13:43:34 Quentin

如何使用javascript捕獲完整的網頁

回答

相關問題