直播HTML預覽改變

Question

我使用（使用HTML/JavaScript的原生應用）節點的webkit，marked（一個js降價編譯器）和CodeMirror建設降價編輯器（代碼編輯）。所以我基本上使用HTML和JavaScript（+ jQuery）構建一個降價編輯器，它作爲本機應用程序運行。

它的一個特性是它具有編譯好的HTML的實時預覽。此實時預覽位於iframe中，每次用戶更改CodeMirror編輯器中的任何內容時都會進行更新。問題是，當預覽更新iframe中的整個文檔被替換時。因此，每次按下按鍵時基本上都會重新加載整個網頁。這不是非常有效，並且使整個應用程序運行緩慢。將任何嵌入式媒體（如Youtube視頻）添加到文檔時也是一個問題，因爲每次預覽更新時都會重新加載該視頻。

我試圖通過添加計時器來解決問題，因此預覽不會每250毫秒更新一次。這解決了緩慢問題，但嵌入式媒體仍會在每次預覽更新時重新加載。

我嘗試了一些其他實時預覽HTML/markdown編輯器，並且大部分使用了與我一樣的實時預覽的方法，除了StackEdit（可能還有其他一些但StackEdit就是一個很好的例子）。我注意到，在StackEdit中，當您在文檔中的某處嵌入YouTube視頻，然後在文檔的其他位置編輯一些文本時，Youtube視頻不會重新加載。這正是我需要的：只更新預覽中已更改內容。我怎樣才能讓我的實時預覽像那樣工作？

注意：這是怎樣的預覽當前獲取更新：

var HTML = marked(CodeMirror.getValue()); 
$('iframe').contents().find('.content').html(HTML); 

（出現這種情況，每次用250毫秒的間隔時 內容的codemirror編輯修改。）

Answer 1

你可能尋找一種方式，用類似HTML_PREV比較HTML。如果是這種情況，您可能正在尋找HTML diff算法，如htmldiff.js。您也可能對此related question感興趣。