避免重複的Javascript iframe內

這裏是ilustrate遺留項目，顯示一些性能問題，結構的線框：避免重複的Javascript iframe內

enter image description here

對於所有對話框（從jQuery UI的）打開創建一個新的iframe和重新下載家中的所有js，並重新實例化所有對象。我是否可以創建從主頁到所有新iframe的jQuery參考，並在每個iframe 隔離範圍內工作？

例如：

[家庭範圍]

$("#some-el").data('foo', 'bar'); 
console.log($("#some-el").data('foo')); // results bar

[應用1範圍]

//after defined in Home first run 
console.log($("#some-el").data('foo')); // results undefined

PS：記住，這是一個傳統architeture和所有的解決方案必須考慮這種情況。

來源

2013-01-23 Ragen Dazs

您可能可以重新使用app.js和a-lot-of-stuff.js，但jQuery假定它正在處理單個文檔。試圖在iframe中使用它時，庫的某些部分可能無法正常工作或根本無法正常工作。（例如document.ready） –

我以前遇到過這種情況。一種方法是定義一些JavaScript，將其加載到iframe中，然後將任何函數調用重新路由到top.functionCall()而不是包含其實際定義。它變得非常簡單，如果您的所有功能都在一個命名空間中，像這樣：

父窗口的js：

var namespace = (function() { 
    // all of your functions are in here as properties of namespace 
})();

的iframe窗口JS：

var namespace = top.namespace;

一個這個問題是任何上下文敏感的函數（依賴或操作window對象的函數）很可能會中斷。

來源

2013-01-23 15:44:08 jbabey

實際上，如果所有這些託管在同一個地方，瀏覽器將不會多次下載文件。相反，它會緩存第一個結果，然後從第二個緩存中取出。 Iframe被視爲一個單獨的上下文，因此您不必擔心變量或表單衝突。

假設兩次下載同一個文件是您最關心的問題，那麼您應該在那裏確定。

另一種設計是使用AJAX而不是iframe內容 - 但是一直在使用舊版應用程序的地方，我意識到如果沒有真正的JSON/REST調用可以做到這一點是多麼困難。我做的一件事是將iframe內部的視圖更改爲「partials」，只返回HTML頭部所需的HTML內容，並使用$ .load（）加載它們。這會變得複雜，因爲您需要在後加載時執行綁定並仔細跟蹤表單ID等，但可以完成。

來源

2013-01-23 15:43:10 Joshua

避免重複的Javascript iframe內

回答

相關問題