在页面加载时从客户端获取Javascript值

时间:2014-02-24 12:19:53

标签: c# javascript

我正在尝试确定pageload上的客户端窗口大小,以便在使用c#创建位图时使用。通过阅读SO和其他地方,我知道一种方法是:

  1. 编写Javascript函数以获取相关值;
  2. 将这些存储在隐藏的字段中;
  3. 使用后面的代码(c#)读取值,然后用它做任何事情。
  4. 然而,即使我已设置<body onload...来获取和设置相关值,我也会被执行序列绊倒,因为执行序列会在任何Javascript之后运行代码。 (见下文)

    我知道我的其余代码都有效,因为当我执行时,页面显示“by”和按钮。然后,在我点击按钮并重新加载页面后,它现在可以突然读取两个隐藏的值。

    我的问题是,我如何获取我的c#Page_Load代码以从客户端获取这两个隐藏值,之前执行我的其余代码,而不需要像用户那样执行操作点击按钮?

    我的页面:

    <body onload="getScreenSize()">
        <form id="form1" runat="server">
    
            <input type="hidden" name="hiddenW" ID="hiddenW" runat="server" />
            <input type="hidden" name="hiddenH" ID="hiddenH" runat="server" />
       <script>
           function getScreenSize() {
               var myW = document.getElementById("hiddenW");
               myW.value = window.innerWidth;
               var myH = document.getElementById("hiddenH");
               myH.value = window.innerHeight;
           }
       </script>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </form>
    </body>
    

    代码背后:

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(hiddenW.Value+" by " +hiddenH.Value);
        }
    
    }
    

    首次运行时(当我需要这些值时),它会显示

    enter image description here

    点击按钮后,它证明了Javascript的工作原理:

    enter image description here

    接下来的问题是,在其他的Page_Load代码运行之前,如何获取这些值,以便我可以直接生成并显示我的图像?

3 个答案:

答案 0 :(得分:2)

在执行C#Page_Load()之前无法获取客户端窗口大小,因为在C#代码执行完成后,页面将呈现给客户端。
窗口大小可能会在页面加载期间发生变化,因此您必须在页面加载完成后才能获取窗口大小。

<强>解决方案
在页面完全加载后,您可以使用ajax将值发送到后端
在获得正确的值后,您可以使用java脚本进行回发,这样: JQuery的:

$(function() {
    var width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
    var height = window.innerHeight ||
             document.documentElement.clientHeight ||
             document.body.clientHeight;
    $('#hdn_width').val(width);
    $('#hdn_height').val(height);
    $('#your_form').submit();
});

C#:

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        if (IsPostBack)
        {
            // Use hdn_width and hdn_height here
        }
    }
    catch (Exception ex)
    {
    }
}

答案 1 :(得分:1)

使用IsPostBack属性

这可以解决您的问题

For Example

if(!Page.IsPostBack)
{
   //Control Initialization
   //Your code goes here
}

答案 2 :(得分:0)

我使用一个计时器回发一次和两个未显示的文本框来存储窗口值的宽度和高度。文本框中填充了javascript:

document.getElementById('<%=TxWd.ClientID %>').value = window.innerWidth;
document.getElementById('<%=TxHt.ClientID %>').value = window.innerHeight;

在(VB.NET)后面的代码中:

Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
    Session("seswidth") = Val(TxWd.Text)
    Session("sesheigth") = Val(TxHt.Text)
    Timer1.Enabled = False
End Sub