2014-07-24 64 views
1

這是我的難題:PJAX成功後執行頁面特定的javascript代碼

我的網站使用PJAX將HTML加載到每個頁面的'#main'容器中。

每頁都有自己特定的javascript文件。例如:'dashboard.index.js','inbox.index.js'等等。 注意:所有庫都通過PreloadJS在頁面的第一次加載時預加載,以避免javascript編譯開銷。

頁面的第一次加載是完美的,不用擔心,因爲它是一個正常的HTML加載。

但是,如果我再次回到此頁面,PJAX將不會重新加載JavaScript文件,因爲它已經在DOM中。

我試過到目前爲止&沒有很好地工作:在「主」容器底部

  1. 將JavaScript文件。 PJAX將它轉移到DOM的'HEAD',並且不會在第二次加載它。
  2. 在'main'容器中放置內嵌腳本以執行每個頁面的功能。由於代碼在加載JS庫之前執行,因此失敗。
  3. 綁定'PJAX成功'事件並執行功能。無法根據當前加載的頁面確定要執行的功能。

因此,我的問題:

有什麼策略來加載關聯到每個頁面特定的JavaScript文件?

+0

我已經解決了這個問題。將在stackoverflow允許我時發佈答案。 – Mysteryos

回答

1

從pjax加載HTML時,我向div添加了'data-js'屬性,其中包含要成功加載HTML時調用的函數的名稱。

然後,它只是使用'pjax:success'事件來調用該函數的問題。

+0

我會建議使用pjax:end而不是 – Ronald

+0

現在我使用'end'事件,當我發現pjax沒有在'window.onpopstate'上執行腳本時。 @Ronald謝謝你的提示 – Mysteryos

+0

Hello @Mysteryos。我面臨同樣的問題,並希望加載頁面特定的JS。你是說你爲div添加了data-js屬性,它是片段div嗎?我有這個:http://pastebin.com/1iCPn40u所以它應該有data-js屬性的.content?然後,你是否在數據-js有「dashboard.index.js」,所以在pjax:end,它執行jQuery getScript($(this).attr('data-js'))加載腳本?希望你能幫助我! – Karem