3

次のコードを使用して画面の高さを取得しています。

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

rheightの値は768として出力されますが、これは正しいです。

しかし、私がこれを行うとき：-： 

<CFSET sheight = rheight / 4>

次のエラーが発生します。

値document.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スコープに配置され、アプリケーション全体で使用できるようになります。

ここで覚えておくべきことの1つは、SESSIONスコープの値は、更新されるまで元の呼び出しページ（AJAX要求を行ったページ）では使用できないということです。

それがお役に立てば幸いです。

于 2012-07-09T11:07:03.257 に答える