屏幕尺寸檢測後的Coldfusion

我正在製作一個響應式網站，我希望能夠使用JavaScript來獲取屏幕尺寸，然後根據屏幕尺寸顯示一個coldfusion包括。事情是這樣的：屏幕尺寸檢測後的Coldfusion

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

我也通過阿賈克斯試圖加載（），但我卡住時，我有包括CFM文件中的文件中已經想包括。

來源

2012-03-05 meijiOrO

做file.cfm和file1.cfm包含HTML或JavaScript作爲他們的輸出內容？ – 2012-03-06 05:14:14

你試圖做的事是不可能的。 JavaScript是客戶端語言，ColdFusion是服務器端語言。您不能在一個JavaScript塊中執行cfinclude，因爲該代碼將在瀏覽器中執行，而不是在服務器上執行。

來源

2012-03-05 19:20:14

我知道代碼不起作用，但我試過通過.ajax（）加載cfm文件，但是如果在我想包含的文件中存在第二個包含文件，那也不起作用，所以我想知道是否存在是另一種方式。 – meijiOrO 2012-03-05 19:24:22

其實，這是可能的。看看我的答案，看看你是否不同意。 – 2012-03-05 20:06:13

meijiOrO - 正如我所見，你有三個可行的選擇。 1.使用涉及重定向的Evik解決方案。 2.使用媒體查詢 - http://bit.ly/moVx2X 3.使用Application.cfc中的某些內容檢查用戶代理並設置變量以確定包含哪個文件。我知道，這不會考慮屏幕尺寸，但根據您的其他要求，此方法可能會比其他要求更符合您的要求。這裏是關於如何做到這一點的更多信息，http://bit.ly/xNiNP3 – 2012-03-06 04:23:29

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

來源

2012-03-05 19:39:49

我不想重定向。我只是想追加到模板。我也嘗試使用.load（），但包含文件有mysql查詢和其他包含和變量。 – meijiOrO 2012-03-05 20:38:49

考慮到問題的具體表達方式，「使用javascript獲取屏幕大小，然後渲染包含屏幕大小的coldfusion」，這是迄今爲止最接近的答案。爲了確定屏幕大小，頁面必須完成並渲染，以便JS可以觸發以獲取大小。然後，根據大小，它會向相應的CF文件發出新的請求。當然，它不是一個包含，但正確的CFM文件將被調用。如果該文件需要執行其他操作，那麼將其傳遞給URL以完成這些操作所需的信息。 – 2012-03-06 03:01:58

你應該使用不同的顯示渲染CSS媒體查詢和樣式表基礎上屏幕尺寸。這將允許您爲這兩個顯示器都有一個CF頁面。不需要AJAX。在媒體查詢

W3C文檔：http://www.w3.org/TR/css3-mediaqueries/

的「自適應網頁設計」大文章： http://www.alistapart.com/articles/responsive-web-design/

下面是使用這種技術的網站的一些真棒例子：http://mediaqueri.es/

來源

2012-03-06 14:50:31

屏幕尺寸檢測後的Coldfusion

回答

相關問題