問(wèn)題描述

tabs load的html，里面有js，也有html，id，都有可能沖突，如何解決？

（不用ifame哦，iframe每次加載明顯不如load，即便是緩存，也要初始化很多的，而且iframe內(nèi)部帶的dialog要在iframe外顯示也很費(fèi)勁，多個(gè)頁(yè)面有同樣的dialog也會(huì)出現(xiàn)這種問(wèn)題）

問(wèn)題解答

回答1：

有三種方案：

用某種命名規(guī)范把 id 修改成互不沖突的形式。雖然這個(gè)解決方案看起來(lái)最不符合題主的要求，但是個(gè)人最推薦這么做，會(huì)減少后期的不少麻煩。如果這些 html 邏輯上是在同一個(gè)界面上的，那么它們就本該具有不同的 id，要不以后寫(xiě)邏輯和樣式的時(shí)候都會(huì)遇到麻煩。

假設(shè)只是 tab 的 html 會(huì)有 id 沖突，且同時(shí)顯示的 tab 只有一個(gè)，那么可以考慮每次切 tab 的時(shí)候都把沒(méi)顯示的 tab 從 DOM 里面 detach，當(dāng)需要的時(shí)候再 append。

使用 <iframe src='about:blank'></iframe> 來(lái)顯示 html，通過(guò)設(shè)置 <iframe> 的 contentWindow.document.body.innerHTML 可以修改它的內(nèi)容。如果還希望能很好的顯示 html 的外帶樣式和腳本，還有各種 dialog，也可以有各種 hack 的方法，但總歸是個(gè) hack，后患無(wú)窮。

P.S. 應(yīng)題主要求，補(bǔ)充一些 hack 的思路。

如何讓 jQuery UI 的 dialog 默認(rèn)插入到指定的地方？

可以通過(guò)下面代碼覆蓋 dialog 的默認(rèn)選項(xiàng)，其中關(guān)鍵的是 appendTo 這個(gè)選項(xiàng)。

$.extend($.ui.dialog.prototype.options, { appendTo: tabNode});

每次加載 tab 前、切換 tab 后的時(shí)候都把這個(gè)選項(xiàng)設(shè)置一下，設(shè)置成當(dāng)前顯示的這個(gè) tab node。