我應該使用iframe而不是ajax嗎？

我們正在建立一個帶有音頻播放器的Drupal站點，該站點應該在您瀏覽頁面時繼續播放（類似soundcloud）。我應該使用iframe而不是ajax嗎？

目前我們正在使用ajax加載點擊<a>的站點，並將html注入頁面並使用history.js來操作位置。

有雖然主要缺點：

由於新加載的頁面可能有不同的CSS和它的JS，我們來比較當前的腳本，風格和鏈接元素Ajax響應文本（醜陋的正則表達式）只添加新的但不存在的元素。通過這樣做，加載另一個頁面不會刪除/刪除/撤消一次執行的腳本。這可能會成爲一個性能問題（而反對標記的正則表達式無論如何）。

使用iframe可能會解決這個問題和其他問題：

當你第一次點擊網站上的鏈接，頁面內容是由剛剛加載頁面的iframe代替。音頻播放器是在原來的dom中，我。即在iframe之外。點擊iframe中的鏈接也可以在歷史記錄API中捕獲和使用。

所以，雖然我從來沒有想過我會這樣想：我認爲使用iframe可能是更好的選擇，不是嗎？

PS：我的主要問題是我無法控制網站上的不同頁面有不同的腳本，樣式真的沒有問題。如果只有一個巨大的靜態js和css網站，我沒有問題。

更新

iframe解決方案工作正常，但在iOS中。 Iframes是越野車如地獄。不過，我認爲我們正在使用iframe解決方案。

來源

2016-02-02 Alex

你可以有一個「reset.css」文件清理所有以前加載的CSS - 但然後你需要確切知道每個頁面將以css的方式應用，這聽起來像你無法控制。如果通過'link'加載，也可以卸載css，但同樣取決於你如何加載css，看看這裏：http://stackoverflow.com/questions/1598899/unload-css-from-webpage –

CSS是沒有問題的。如果刪除樣式或鏈接元素，則CSS會被撤消。如果您追加新的樣式，樣式會更新。但腳本的行爲不同 – Alex

爲什麼你需要有不同的css/js文件？你不能連接/縮小它們並只服務一次嗎？通過這種方式，當更改頁面時，您只需正確處理不同的狀態（綁定事件，解除綁定...）。 –

我會說...保持簡單，愚蠢。尋求iframe解決方案，我知道它會殺死你的靈魂的一部分，但它是解決你的問題的最簡單的解決方案，並代表將來遇到問題的最低改變。

KISS。

來源

2016-02-11 15:24:10

我們目前正在測試iframe方法及其華麗。唯一真正的缺點是iOS，它在iframe和錯誤方面存在着巨大的問題:( – Alex

你可以嘗試做一些奇怪的東西。

首先，您可以將window對象與新鮮對象進行比較，並刪除所有其他屬性（here's an example）。 document,HTMLElement,Array.prototype對象和其他可以通過腳本擴展的對象也可以做同樣的事情。這樣你就可以消除大部分已定義的東西，垃圾收集器會在某個時候放棄這些東西。

其次，你想要刪除所有事件監聽器。這可以通過重新定義addEventListener等（refer to this question for example）。第三，你不應該忘記間隔時間和超時時間，這可以使用與前一個方法相同的方法來處理（包裝setTimeout等）（found it here）。

當然，還有很多東西還剩下來，這取決於哪些腳本在頁面中運行。所以當用戶點擊一個鏈接而歌曲沒有播放的時候，你可以刷新一個頁面（也許在音軌之間轉換）。看到？很多工作要做，而這可能什麼也不做。因此，在所有這些理論之後，我會使用iframe。因爲，你知道，例如：如果你的某些站點的腳本包裝了任何js函數（就像我們在第二和第三個函數中那樣），那麼ajaxing會在這個函數上堆積包裝調用，這真的很糟糕。

來源

2016-02-06 23:17:24

一般來說，這也很有趣，像這樣的解決方案非常複雜，並且無疑會在將來引發問題。雖然他們是這樣的例子，這是值得risc ...在這種情況下，有一個解決方案，更容易。 –

@FlipVernooij這就是爲什麼我建議在答案中採用這種方法。 –

我看不到你不應該使用iframe的原因。我認爲使用iframe將頁面嵌入到您的網站內沒有問題。這是一個iframe的用途。

iframe過去對SEO不好，但是，今天的網絡爬蟲通常可以在你的網站和iframes內容之間旅行。

使用iframe會更容易，更簡單，而不是使用「醜陋的正則表達式」。爲什麼不保持簡單，對吧？ KISS principle

來源

2016-02-11 16:58:53 jlulloav

）如果你的目標是保持一個內容區域，那麼這將工作 – CoveGeek

我們目前正在測試iframe方法和它的華麗唯一真實缺點是iOS，它有iframes和bug的巨大問題。我不認爲SEO會是一個問題，因爲只有當你點擊一個鏈接（通過JS）時纔會生成iframe。 – Alex

-1

如果您不介意，我想問您幾個問題，並在回覆時編輯此回覆。原因是我相信你在開始這個項目時做了一些不方便的架構決定。從你的描述中，我假設你在點擊標籤時加載靜態html頁面，如果沒有，你的後端技術是什麼？你應該理想地將邏輯分離成前端和後端，並且將你的前端分成模型，視圖和控制器，而不一定是使用框架工作，或者這樣做（或者MVVM，就像角色一樣）。一些快速關於如何加載數據的建議，不要直接注入html，使用後端技術將json或xml發送到前端，並解析它以在前端模板上顯示您的html，而不是發送您的dom這樣做會不必要的緩慢和昂貴。當你有後端時，嘗試在黑盒環境中構建你的持久層，並通過一個簡單的API調用操縱器方法，這樣它就會更乾淨，執行更快，更可靠。同樣，當您構建移動原生應用程序時，您只需重新使用您的API層即可。

css和js上的正則表達式比較聽起來像一個總的壞黑客，我同意，它會更適合使用iframe，但我需要更多的信息來討論您的整體設置，並希望能幫助你更廣闊的視角

UPDATE：

我明白了爲什麼網頁可能有不同的CSS，但我認爲你的音樂播放器JS應該是相同的源與連接到它們不同的介質ID。假設這個設置，在我認爲是MySql的drupal數據庫中，除了標準id索引條目以及created_at，modified_at等之外，爲您的「音樂播放器」頁面創建一個自定義表格，爲您的可播放源創建一個字段。

在您創建實際播放器的Drupal前端模板上，從數據庫中編寫該源ID。這樣您就可以爲您的音樂頁面創建一個頁面。對於CSS，將所有內容保存在一個文件中，也許使用SASS或LESS之類的東西來編譯你的css文件，以保持一切順序。

在一個要點中，有你的drupal端，php用嵌入式JS編寫你的html頁面，並且通過PHP變量將ID從數據庫傳遞到前端，因爲PHP渲染髮生在服務器端，隨着你的JS加載，頁面ID將會出現。希望這有幫助，讓我知道如果你有更多的問題。

來源

2016-02-12 02:29:46 serdarsenay

感謝您的輸入，但我沒有完全得到你想說什麼，即使我會使用骨幹或角度，我仍然會面臨頁面依賴的腳本和樣式的問題，你的問題到底是什麼？:)臨時upvote <3 – Alex

嘿謝謝，以及什麼我問的是你的後端，即js和css在哪裏運行，在一個簡單的apache/nginx/jetty上，無論是web服務器還是伴隨着像php，java或nodejs這樣的後端語言，根據這個我會建議組織你的con以更好的方式提供部分服務，這樣您就不會遇到只能使用iframe的問題。 – serdarsenay

正如我寫的，我們使用Drupal，所以PHP。儘管如此，語言並不妨礙我的問題，不同的頁面可能會有不同的腳本 – Alex

-1

正如你所說，

使用iframe可能會解決這個問題和其他問題：當你第一次點擊網站上的鏈接，頁面內容是由剛剛加載頁面的iframe代替。音頻播放器是在原來的dom中，我。即在iframe之外。點擊iframe中的鏈接也可以在歷史記錄API中捕獲和使用。

你可以用ajax做類似的事情。將所有需要替換的內容放在一個容器中，並根據Ajax響應替換該容器的內容。請勿觸摸該容器外部的內容。我認爲這也能解決你的表現問題。

來源

2016-02-12 07:43:18

「由於新加載的頁面可能具有不同的CSS和JS，因此我們必須將當前的腳本，樣式和鏈接元素與ajax響應文本（醜陋的正則表達式）進行比較，並只添加新的但不存在的元素。這樣做，加載另一個頁面不會刪除/刪除/撤銷一次執行的腳本。這可能會成爲一個性能問題（而正則表達式反正標記是反正）。「 – Alex

但是，如果在iframe中使用css和js元素加載整個頁面，那將會更好。 –

我想你還沒有明白這個問題的任何一點。通過AJAX加載內容沒什麼大不了的，但JS和CSS呢？請再次仔細閱讀我的問題。 – Alex

我應該使用iframe而不是ajax嗎？

回答

相關問題