холодное слияние после определения размера экрана

Question

Я делаю адаптивный веб-сайт и хочу иметь возможность использовать javascript для получения размера экрана, а затем отображать холодное слияние в зависимости от размера экрана. Примерно так:

if (screen.width <= 700) {
     <cfinclude template="file1.cfm">
} else {
     <cfinclude template="file.cfm">
}

Я также пытался загрузить через .ajax (), но я застреваю, когда у меня уже есть включаемые файлы внутри файла cfm, в который я хочу включить.

Answer 1

JavaScript на стороне клиента.ColdFusion на стороне сервера.Если вы хотите смешать два, вам нужен Ajax.Вам следует попробовать что-то более похожее на использование jQuery для простого Ajax:

// LOOK AT THE SCREEN WIDTH
if (screen.width <= 700) {
     // LOAD THE PAGE INTO THE CORRECT SIZED DIV
     $("#YourDiv").load("ColFusionFile-01.cfm");
} else {
     // LOAD THE PAGE INTO THE CORRECT SIZED DIV
     $("#YourDiv").load("ColFusionFile-02.cfm");
}

Или, возможно, вы захотите перенаправить их:

// LOOK AT THE SCREEN WIDTH
if (screen.width <= 700) {
     // SEND THE VISITOR TO THE CORRECT SIZED PAGE
     window.location.href = "ColFusionFile-01.cfm"
} else {
     // SEND THE VISITOR TO THE CORRECT SIZED PAGE
     window.location.href = "ColFusionFile-02.cfm"
}

Answer 2

Вы должны использовать медиазапросы CSS и таблицы стилей для различного отображения отображения в зависимости от размера экрана.Это позволит вам иметь одну страницу CF для обоих дисплеев.AJAX не требуется.

Документация W3C по медиазапросам: http://www.w3.org/TR/css3-mediaqueries/

Отличная статья о "отзывчивом веб-дизайне": http://www.alistapart.com/articles/responsive-web-design/

Вот несколько замечательных примеров сайтовкоторые используют эту технику: http://mediaqueri.es/

Answer 3

То, что вы пытаетесь сделать, невозможно. JavaScript - это язык на стороне клиента, ColdFusion - это язык на стороне сервера. Вы не можете сделать cfinclude в блоке JavaScript, так как этот код будет выполняться в браузере, а не на сервере.