OK, więc problem, przed którym stoję, polega na tym, że moja przeglądarka Firefox nie pobiera prawidłowych wartości dla window.innerWidth
, document.documentElement.clientWidth
, ani nawet o szerokości div
, zaprojektowanej do przejęcia całego okna klienta po wczytaniu strony.Zła wartość dla window.innerWidth podczas zdarzenia onload w Firefoksie dla Androida?
Nie jestem szalona, mój kod działa dobrze w każdej innej przeglądarce! Z jakiegoś powodu Firefox inicjuje te wartości z wartościami domyślnymi, a następnie pobiera poprawne wartości później. Jeśli w którymkolwiek momencie przerywam JavaScript przy pomocy alert()
, te właściwości będą magicznie później poprawne.
Przeszukałem internet, szukając odpowiedzi, a jedyne, co mogę znaleźć, to obejście problemu: użyj window.setTimeout
, aby opóźnić korzystanie z tych właściwości, dopóki nie będą miały czasu na wypełnienie. To jest szalone! Użytkownicy oczekują szybkości, a nie dodatkowego opóźnienia, aby przeglądać moją witrynę w przeglądarce Firefox.
Nie rozumiem, że mogę ustawić div
, aby wypełnić okno klienta idealnie, zanim wartości staną się dokładne. Robię to w css, ustawiając szerokość i wysokość identyfikatora div na 100%. document.documentElement
jest w zasadzie taki sam jak document.getElementById("my_div");
po załadowaniu wszystkich elementów dokumentu, więc w jaki sposób przeglądarka wie, jak duży powinien być div
, gdy nie ma on właściwych wymiarów okna klienta?
Próbowałem uruchomić mój kod wewnątrz window.addEventListener("load",function(event_){ //My Code });
, ale nadal te wartości nie będą generowane. Czy istnieje zdarzenie ładowania strony przychodzące po window.onload
?
Jeśli ktoś może mi powiedzieć, dlaczego tylko przeglądarka mobilna Firefoksa wydaje się wyświetlać to dziwne zachowanie, podam ci mentalną piątkę.
Oto kawałek kodu próbki do odtworzenia problemu:
<!DOCTYPE HTML>
<html>
<head>
<!-- Added " after javascript during edit. -->
<script type="text/javascript">
window.addEventListener("load",function(event_){
var output=document.getElementById("output");
/* Returns some default value like 980. */
output.innerHTML=window.innerWidth;
alert("After this alert, the value will change.");
/* Returns an accurate value like 511. */
output.innerHTML=window.innerWidth;
});
</script>
<!-- Added title during edit. -->
<title>Title</title>
</head>
<body>
<p id="output">Default Output</p>
</body>
</html>
Mój Firefox dla systemu Android w wersji jest 35.0.1. Moja wersja Androida to 4.4.4. Na moim urządzeniu Firefox wyświetla "980" w wyjściowym elemencie p, pokazuje alert, a następnie ponownie wyświetla "980". Po odświeżeniu strony pierwsze dwa kroki pozostają takie same, ale wynik po ostrzeżeniu zmienia się na 360. Tak samo dzieje się z document.documentElement.clientWidth
. Brak właściwości Próbuję uzyskać prawidłowe wartości. Wygląda na to, że Firefox ma pewne opóźnienie po wczytaniu strony, zanim uzyska dostęp do wymiarów okna klienta ...
Próbowałem wtyczki verge.airve.com bez JQuery, a początkowa informacja zwrotna pozostała na poziomie 980. Zainicjowano również jako 980 w Chrome, co było dziwne, ponieważ Chrome działał bez niego tak jak należy ...
Po długiej debacie znaleziono rozwiązanie! Firefox najwyraźniej zmienia rozmiar okna po jego załadowaniu (domyślam się, kto naprawdę wie)! Tak więc, dodając obsługę zdarzenia zmiany rozmiaru oprócz window.onload, ten problem można uniknąć! Zobacz akceptowaną odpowiedź poniżej, aby uzyskać więcej informacji.
Czy można użyć zdarzenia zmiany rozmiaru zamiast obciążenia? – error
Rozumiem, że zgodność przeglądarki może być frustrująca, ale czy mógłbyś wymyślić bardziej opisowy tytuł? –
Nie jesteś szalony, nie pracowałeś z IE5! –