3

我正在使用以下代码来获取屏幕高度：

<CFSET rheight = "<script>document.write(screen.height);</script>">

rheight 的值为 768，这是正确的。

但是当我这样做时:-: 

<CFSET sheight = rheight / 4>

我收到以下错误：

有价文件.write(screen.height); 不能转换为数字。

这个想法是在不重新加载页面的情况下以数字格式获取屏幕高度。

4

1 回答 1

7

有多种方法可以做到这一点：

没有 AJAX

在不使用任何 AJAX 请求的情况下，您可以使用以下代码获得所需的结果（刚刚在 CF 9.0.2 和 CF10 中测试过）：

<cfset rheight = "
    <script type='text/javascript' 
        src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
    </script>
    <script>
    $(document).ready(function() { 
        $('input.screenHeight').val(screen.height);
        alert($('input.screenHeight').val() / 4);
    })
    </script>">

<cfhtmlhead text="#rheight#" />

<input type="text" class="screenHeight" />

在这个例子中，我们正在创建一个字符串变量，其中包含对 jQuery 库的引用和您的自定义代码来获取屏幕高度。

我们将高度设置为文本输入框的值。然后我们可以提取该值并将其转换为数字。您可以在将值放入输入框之前对其进行转换，如下所示：

$('input.screenHeight').val(screen.height/4);

使用 cfhtmlhead 标记将字符串变量添加到文档的头部：

http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7ae9.html

这仅适用于原始页面视图。如果您需要在页面更改或响应式设计布局更改后获取尺寸，则需要运行 AJAX 请求以恢复屏幕尺寸。

没有 CFML

当然，您根本不需要使用 ColdFusion。您可以仅从 JavaScript 获得相同的数字转换：

<script type='text/javascript'     
    src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<script type='text/javascript'>
    var getScreenHeight = function() {
        return screen.height;
    }

    $(document).ready(function() { 
    var screenheight = getScreenHeight();
    console.log(screenheight/4);
    })
</script>

但是，看起来您需要能够在 ColdFusion 中保留屏幕高度响应中的值，如下所示：

使用 AJAX 和 CFML

修改上面的 JavaScript 示例，我们可以创建一个 AJAX 请求来将屏幕高度值发布到新的 .cfm 页面：

<script type='text/javascript'>
var getScreenHeight = function() {
    return screen.height;
}

$(document).ready(function() { 
    var screenheight = getScreenHeight();

$.get("screensize.cfm",
    { screenheight: screenheight },
    function(data) {
        console.log('screen height has been set in the session scope: ' + data);
    }
)
})
</script>

在最基本的情况下，screensize.cfm 可以包括以下内容：

<cfsetting showdebugoutput="false" />
<cfparam name="URL.screenheight" type="numeric" default="800" />

<cfset session.screenheight = URL.screenheight />

<cfoutput>#session.screenheight#</cfoutput>

（这不包括您可能需要包括的任何验证或失败捕获）

假设您的应用程序启用了会话管理，这会将您发送的值放入 SESSION 范围以在整个应用程序中使用。

这里要记住的一件事是，在刷新之前，原始调用页面（发出 AJAX 请求的页面）将无法使用 SESSION 范围内的值。

我希望这会有所帮助。

于 2012-07-09T11:07:03.257 回答