Jak wyświetlać różne pliki javascript według szerokości przeglądarki

Question

Tak więc chcę niektórych plików JavaScript dla niektórych szerokości przeglądarki. Wiem, że @media udostępnia określone CSS na szerokość przeglądarki i niektóre urządzenia. Jak zrobić coś podobnego w przypadku plików JavaScript, BEZ korzystania z połączeń po stronie serwera?

Czy jest możliwe z Javascriptem wywoływanie innych plików JavaScript na podstawie szerokości przeglądarki? Jeśli tak, jak?

Z góry dziękuję.

Answer 1

Chociaż nie jestem pewien dlaczego, zawsze można importować pliki JavaScript za pomocą skryptu JS.

Poniższe linki podają pewne informacje na ten temat.

• http://www.kevinleary.net/loadexternal-javascript-jquery-getscript/
• http://www.stackoverflow.com/questions/1140402/how-to-add-jquery-in-js-file
• http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Na marginesie - Dlaczego patrzysz na to robi? Z pewnością możesz uzyskać rozdzielczość ekranu, a następnie dostosować obliczenia/zawartość w oparciu o te zmienne bez konieczności zmiany plików JS. Jest tak wiele różnych rozdzielczości (urządzenia mobilne, wiele monitorów, szeroki ekran, projektory itp.). Użytkownik może również zmienić rozmiar przeglądarek skutecznie, co nie jest tego warte.

Answer 2

var scriptSrc = 'js/defaults.js'; 
if (screen.width <= 800) 
    scriptSrc = 'js/defaults-800.js'; 
else if (screen.width <= 1024) 
    scriptSrc = 'js/defaults-1024.js'; 
var script = document.createElement('script'); 
script.src = scriptSrc; 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(script); 

Być może? Dynamicznie ładuj je na podstawie rozdzielczości ekranu. Może również użyć rozmiaru dokumentu, rozmiaru przeglądarki itp. Chociaż nie jestem pozytywny, naprawdę chcesz to robić. Idealnie, chociaż powinieneś zajmować się względnymi wskaźnikami (takimi jak% lub em) w swoim projekcie i unikać tego.

Answer 3

Spróbuj tego:

var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 

if (window.document.body.clientWidth == XXX) { 
    fileref.setAttribute("src", "script1.js") 
} else { 
    fileref.setAttribute("src", "script2.js") 

}

Answer 4

media queries są dobrym rozwiązaniem dla zapewnienia alternatywnych stylów dla różnych szerokościach okiennych. Niestety, nie ma żadnego atrybutu media dla elementu <script>, aby postępować w podobny sposób.

Można jednak podać skrypt ładujący skrypt, który załaduje żądany plik .js w zależności od arkusza stylów wybranego przez przeglądarkę na podstawie zapytania o media. Nie wiem, jak to zrobić w bezpośredni, elegancki sposób, ale jest na to fajny hack. Musisz "oznaczyć" każdy znak .css za pomocą unikatowej deklaracji (manekina, nieważne lub różni się w zależności od projektu) i sprawdzić ją w programie JS po załadowaniu strony, aby ustalić, który arkusz stylów został zastosowany przez przeglądarkę.

HTML może wyglądać następująco:

<style media="handheld, screen and (max-width:1023px)"> 
    body { margin-top: 0px } 
</style> 
<style media="screen and (min-width:1024px)"> 
    body { margin-top: 1px } 
</style> 

i towarzyszącego JS następująco:

function onLoad() { 
    var head = document.getElementsByTagName('head')[0]; 
    var body = document.getElementsByTagName('body')[0]; 
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top'); 

    var script = document.createElement('script'); 
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js'); 
    head.appendChild(script); 
} 

ta spełnia swoje zadanie, ale tylko na podstawie na obciążenia. Aby uzyskać elastyczną reakcję na zmianę rozmiaru okna przeglądarki przez użytkownika, powinieneś śledzić szerokość wdów i w razie potrzeby ponownie załadować stronę.

Answer 5

Od 2011 roku świat zmienił się w erę mobilną.

Możesz chcieć wypróbować za pomocą: document.documentElement.clientWidth, ponieważ powie Ci ona widoczny obszar twojej strony - reaguje na powiększenie, ale nie na dźwięk.