javascript - 我从 JAVA 的 getElementById 收到错误消息

标签 javascript getelementbyid

我一直在尝试将值传递给后面的代码,并通过论坛确定最佳方法。使用隐藏字段建议的一些答案。我一直在尝试这样做,但是当我调试时说当它通过 ID 检索元素时 JAVA 变量为空时,它不断收到错误消息。我似乎无法弄清楚为什么,因为我使用的答案中的确切代码示例被标记为最佳解决方案并且工作正常。我一定做错了什么,但我不知道是什么。下面是我从论坛中借来的 ASPX 页面代码和背后的代码。

***<Page Code>***

%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<script type="text/javascript">
{
    var hidden1 = document.getElementById('hidvalue')
    hidden1.value=window.innerWidth.toString & "X" & window.innerHeight.toString;
}
</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

    <input id="hidvalue" type="hidden" runat="server" />

    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</asp:Content>

***<Code Behind Page>***

Partial Class test

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

        Label1.Text = hidvalue.Value

    End Sub

End Class

当 JAVA 脚本到达以代码 'hidden1.value=window.innerWidth.toString' 开头的行时,将引发错误。该错误表示它无法为变量“hidden1”赋值,因为它为空。它应该填充元素“hidvalue”,但显然不是,我不知道为什么。有没有人知道我在这里做错了什么?

修订:
感谢大家帮助解决了最初的问题,通过在页面中添加 OnLoad 和 ReSize 并在每个页面中添加代码以使这些事件能够以正确的页面加载顺序跟踪窗口大小,从而解决了这个问题。 (参见下面的代码)对于 test.aspx 页面,我使用可见标签来存储大小,以便在值发生变化时看到它们。 test.aspx 子页面在一个基本空白的母版页下运行,它在加载时显示窗口大小,并在完美调整大小时显示一个不断变化的值。
***<MASTER PAGE>***

    <%@ Master Language="VB" AutoEventWireup="false"  %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">   
        <title></title>    
        <asp:ContentPlaceHolder ID="HeadContent" runat="server"/>
    </head>
    <body>
        <form runat="server">
        <div class="page">                      
            <div class="main">
                <asp:ContentPlaceHolder ID="MainContent" runat="server"/> 
            </div>                                
        </div>        
        </form>
    </body>
    </html>

***<TEST PAGE>***
<%@ Page Title="" Language="VB" MasterPageFile="~/Empty.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript">
    function attachEventHandlerResize(element, eventToHandle, eventHandler) {
        if (element.attachEvent) {
            element.attachEvent(eventToHandle, eventHandler);
        } else if (element.addEventListener) {
            element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
        } else {
            element[eventToHandle] = eventHandler;
        }
    }
    attachEventHandlerResize(window, "onresize", function () {
        var hidden1 = document.getElementById('<%= LabelWindowSize.ClientID%>');
        hidden1.innerText=window.innerWidth + "X" + window.innerHeight;
    });
    function attachEventHandlerLoad(element, eventToHandle, eventHandler) {
        if (element.attachEvent) {
            element.attachEvent(eventToHandle, eventHandler);
        } else if (element.addEventListener) {
            element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
        } else {
            element[eventToHandle] = eventHandler;
        }
    }
    attachEventHandlerLoad(window, "onload", function () {
        var hidden1 = document.getElementById('<%= LabelWindowSize.ClientID%>');
        hidden1.innerText = window.innerWidth + "X" + window.innerHeight;
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:Label ID="LabelWindowSize" runat="server"/>
</asp:Content>

***<CODE BEHIND TEST.ASPX>***
Imports System.Diagnostics
Partial Class test
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Debug.Print("LabelWindowSize.text value=" + LabelWindowSize.Text)
    End Sub
End Class

页面上的标签在浏览器中正确显示值(即:1050X724)。但是,由于某种原因,在从标签中获取 Text 时,后面的代码无法访问显示的值。调试输出是:'LabelWindowSize.text value=' 没有值,并且检查 LabelWindowSize 的文本值显示“”。

我有一种预感,由于页面加载、执行和访问元素的顺序,问题正在发生,就像之前解决的解决方案一样。有谁知道实际上是什么导致了这个问题?

修订:
好的,将 aspx 页面更改为使用隐藏文本控件
<%@ Page Title="" Language="VB" MasterPageFile="~/Empty.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript">
    function attachEventHandlerResize(element, eventToHandle, eventHandler) {
        if (element.attachEvent) {
            element.attachEvent(eventToHandle, eventHandler);
        } else if (element.addEventListener) {
            element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
        } else {
            element[eventToHandle] = eventHandler;
        }
    }
    attachEventHandlerResize(window, "onresize", function () {
        var hidden1 = document.getElementById('<%= labelwindowsize.ClientID%>');
        hidden1.value = window.innerWidth + "X" + window.innerHeight;
    });
    function attachEventHandlerLoad(element, eventToHandle, eventHandler) {
        if (element.attachEvent) {
            element.attachEvent(eventToHandle, eventHandler);
        } else if (element.addEventListener) {
            element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
        } else {
            element[eventToHandle] = eventHandler;
        }
    }
    attachEventHandlerLoad(window, "onload", function () {
        var hidden1 = document.getElementById('<%= LabelWindowSize.ClientID%>');
        hidden1.value = window.innerWidth + "X" + window.innerHeight;
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <input id="labelwindowsize" type="hidden" runat="server"/>
</asp:Content>

从页面检查器 View 中可以看到,它正在填充:
<form name="aspnetForm" id="aspnetForm" action="test.aspx" method="post">...</form>
<div>...</div>
</div>
<div>...</div>
</div>
<div class="page">...</div>
<div class="main">...</div>
<input name="ctl00$MainContent$labelwindowsize" id="ctl00_MainContent_labelwindowsize" type="hidden" value="645X557"></input>
</input>
</div>
</div>
</form>

但是,后面的代码仍然看不到该值...以下行为“值”生成“”
Debug.Print("LabelWindowSize.text value=" + labelwindowsize.Value)

更详细的解释:
我尝试实现的代码的目的是检索浏览器窗口大小,以便将宽度和高度存储在 App_Code 模块中作为页面访问的全局变量。需要全局窗口大小变量的原因是将在多个页面上打开的可滚动弹出窗口的大小设置为当前窗口的完整大小。我试图这样做是为了尽可能多地显示图像和其他大型项目,例如比平均显示窗口大得多的巨大表格或网格。我想这样做的原因是减少用户查看可滚动弹出窗口的全部内容所需的滚动量,并能够在用户调整浏览器大小时将弹出窗口调整为完整窗口大小 window 。

最佳答案

您的隐藏字段具有属性 runat="server" , 所以它的 id 在页面被渲染时会改变。以这种方式找到它:

var hidden1 = document.getElementById('<%= hidvalue.ClientID %>');

关于javascript - 我从 JAVA 的 getElementById 收到错误消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18178373/

相关文章:

javascript - 匹配最多 9 位整数的正则表达式

javascript - 如何使用javascript从一个表单获取值并发布到另一个表单?

javascript - 为什么这个 setAttribute 函数不起作用?

javascript - 当鼠标悬停在图 block 上时我的 CSS 模板出现问题

javascript - 在 Javascript 中分配 Id 并迭代行

javascript - 如何在firefox上使用parent.parent.document.getElementById? ASP.NET

javascript - 使用 javascript 数组值更改类名

javascript - Redux action 和 async/await 函数在类组件和函数中具有不同的行为

javascript - 单击选择的选项时将数组行回显到文本区域中

javascript - 通过id获取元素并将其放入bootstrap col中