在元素的CSS屬性更改後調用外部.js文件

我遇到了與上述here, with an embedded Google Map being offset相同的問題，而且不是非常精通JavaScript，我很難理解如何以理想的方式解決此問題。在元素的CSS屬性更改後調用外部.js文件

我使用jQuery的工具庫做出各種各樣的「嚮導」爲我的用戶，因爲這裏概述：http://flowplayer.org/tools/demos/tabs/wizard.html

一個嚮導具有嵌入谷歌地圖的窗格。該地圖存在OP中提到的問題。

爲了防止在jQuery Tools腳本隱藏它們之前，嚮導的所有窗格的flash一開始是可見的，我給了窗格「display：none」的CSS屬性（第一個窗格除外）。這是問題的根本原因 - 在CSS中註釋掉該行可以立即看到該窗格，並且嵌入式Google地圖工作正常。

我的問題很簡單：我將如何呈現以下僞jQuery代碼在正確的jQuery/JavaScript？

when (.pane.hasMap).css("display") == "block" 
{ 
    load/run external google-maps.js file 
}

另外，我需要它運行每用戶切換到窗格與地圖，或者只是第一次的時間？

編輯：

爾加...我剛剛發現，我的CMS中的谷歌地圖插件自動插入腳本到頁面遠高於我一直手動哪裏（和冗餘，因爲它原來）指定劇本。所以，我無法控制何時調用腳本並呈現地圖。

所以，我能想到的唯一選擇是讓地圖的容器定位在屏幕外，然後在調用選項卡時將其恢復到原位。這樣也許?:

if ($(".pane.hasMap").is(':visible')) { 
    $(".mapContainer").css("top", "0", "left", "0"); 
}

來源

2011-10-17 Sandwich

事做事情，如果事情是可見的：如果你使用jQuery顯示隱藏的元素

if ($(".pane.hasMap").is(':visible')) { 
    $.getScript("https://apis.google.com/js/google-maps.js", function() { 
      //execute maps here; 
    }); 
}

，它可能會更好，同時爲拿到劇本您可以使這些元素可見，如下所示：

$(".pane.hasMap").show('slow', function() { 
    $.getScript("https://apis.google.com/js/google-maps.js", function() { 
      //execute maps here; 
    }); 
});

來源

2011-10-17 16:54:52 adeneo

D'oh！剛剛發現了一些阻止該解決方案可行的方法。 :(無論如何還是OP！用新信息編輯的OP – Sandwich

對於我自己的記錄以及這對其他人有用的情況：我已經在每個頁面的頁腳模板中調用了初始化Google Maps腳本，但腳本也被自動插入（這種自動插入只發生在我的案例/ CMS /附加組件中編輯地圖的頁面中），所以_that_頁面被調用了兩次，並且中斷了。一旦我添加了一個條件語句來不調用腳本在頁腳中，如果它在編輯地圖頁面上，一切似乎都奏效。*嘆息* – Sandwich

在元素的CSS屬性更改後調用外部.js文件

回答

相關問題