Cách phân phối các tệp javascript khác nhau theo chiều rộng của trình duyệt

Question

Vì vậy, tôi muốn một số tệp Javascript nhất định cho độ rộng trình duyệt nhất định. Tôi biết rằng @media phục vụ CSS cụ thể cho mỗi chiều rộng trình duyệt và một số thiết bị. Tôi sẽ làm điều gì đó tương tự cho các tệp Javascript, KHÔNG sử dụng các cuộc gọi phía máy chủ?

Có thể sử dụng Javascript để gọi các tệp Javascript khác dựa trên chiều rộng của trình duyệt không? Nếu có, Làm thế nào?

Xin cảm ơn trước.

Answer 1

Mặc dù tôi không chắc chắn lý do tại sao, bạn luôn có thể nhập tệp JavaScript thông qua JS Script.

Các liên kết sau cung cấp một số thông tin về điều này.

• 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

ON một mặt lưu ý - Tại sao Bạn đang tìm kiếm tại làm điều này? Chắc chắn bạn có thể nhận được độ phân giải của màn hình và sau đó điều chỉnh các tính toán/nội dung dựa trên các biến đó mà không cần phải thay đổi các tệp JS. Có rất nhiều độ phân giải khác nhau (thiết bị di động phát triển, nhiều màn hình, màn hình rộng, máy chiếu, v.v ...). Một người sử dụng cũng có thể tái kích thước các trình duyệt một cách hiệu quả làm cho điều này không có giá trị nó.

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); 

Có lẽ? Tự động tải chúng dựa trên độ phân giải màn hình. Cũng có thể sử dụng kích thước tài liệu, kích thước trình duyệt, vv Mặc dù tôi không tích cực bạn thực sự muốn làm điều này. Lý tưởng nhất là bạn nên xử lý các chỉ số tương đối (như% hoặc em) trong thiết kế của bạn và tránh điều này.

Answer 3

Hãy thử điều này:

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

Truyền thông truy vấn là một giải pháp tốt cho việc cung cấp phong cách thay thế cho độ rộng cửa sổ khác nhau. Thật không may, không có thuộc tính media cho phần tử <script> để tiến hành tương tự.

Tuy nhiên, bạn có thể cung cấp tập lệnh tải tập lệnh sẽ tải tệp mong muốn .js tùy thuộc vào biểu định kiểu được trình duyệt chọn trên cơ sở truy vấn phương tiện của bạn. Tôi không biết làm thế nào để làm điều này một cách trực tiếp, thanh lịch nhưng có một hack tốt đẹp cho điều đó. Bạn phải "đánh dấu" mỗi .css với một tuyên bố duy nhất (giả, không quan trọng hoặc khác nhau theo thiết kế) và kiểm tra từ bên trong JS sau khi trang đã tải để xác định biểu định kiểu nào đã được trình duyệt áp dụng.

HTML có thể trông như thế này:

<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> 

Và JS kèm theo như sau:

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); 
} 

này không được công việc, nhưng chỉ trên một cơ sở cho mỗi tải. Để có được phản ứng nhanh chóng để thay đổi kích thước cửa sổ trình duyệt của người dùng, bạn nên theo dõi chiều rộng của góa phụ và tải lại trang khi cần thiết.

Answer 5

Kể từ năm 2011, thế giới đã chuyển sang thời đại di động.

Bạn có thể muốn thử: document.documentElement.clientWidth, vì nó sẽ cho bạn biết khu vực hiển thị của trang của bạn - nó phản ứng với phóng to nhưng không được quảng cáo chiêu hàng.