javascript - 从外部 JS 文件调用时 document.getElementById() 返回 NULL

标签 javascript asp.net dom document getelementbyid

我已经查看了与此问题相关的所有其他问题/解决方案,但找不到解决方案。

我有一个带有按钮的基本 aspx 页面。 OnClick 调用 JS 函数。 Javascript 函数调用 document.getElementById() 有效。然后,我调用位于外部 JA 文件中的子函数,但相同的调用失败。为什么?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jstest.aspx.cs" Inherits="jstest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:CheckBox runat="server" ID="RunAtStartup" OnClick="function1();" text="Click Me" />
    </div>
    </form>

    <script>
    function function1()
    {
        if (document.getElementById("<%= RunAtStartup.ClientID %>") == null)
            alert('function1 null');
        else
            alert('function1 not null');
        function2();
    }
    </script>
    <script src="./function2.js"></script>
</body>
</html>

外部 javascript 文件 function2.js 是

    function function2() {
    if (document.getElementById("<%= RunAtStartup.ClientID %>") == null)
        alert('function2 null');
    else
        alert('function2 not null');
}

单击按钮的结果将显示 function1 为“not null”,function2 为“null”。

我尝试过将文档作为参数传递,但没有成功。我尝试执行 function2().bind(document),但没有成功。我单步执行了 javascript 调试器,看起来 function1 中的文档对象与 function2 中的文档对象相同。

提前致谢 迈克尔

最佳答案

据我所知,该元素的名称是由 ASP.net 预处理器创建的。由于 JS 文件不在 ASP.net 中进行解析,因此它按字面意思处理选择器,而不是真正的元素 ID。因此,该脚本无法从外部 JS 文件运行。在 ASP 文件中,它替换

<%= RunAtStartup.ClientID %>

带有实际的元素ID。外部文件正在寻找类似这样的内容:

<span id="<%= RunAtStartup.ClientID %>"></span>

它再次将 ID 视为文字字符串,就好像您在未安装 ASP.net 的服务器上运行它一样。我的解决方案可能是将 ID 存储在 ASP.net 文件的变量中,如下所示:

var id = "<%= RunAtStartup.ClientID %>";

然后,外部JS文件可以使用以下内容:

var element = document.getElementByID(id);

当然,在创建变量id之后,必须包含外部JS文件。或者,更好的解决方案是将 ID 作为函数参数传递,如下所示:

function function2(id) {
    if (document.getElementById(id) == null)
        alert('function2 null');
    else
        alert('function2 not null');
}

ASP.net 文件可以像这样调用该文件:

function2("<%= RunAtStartup.ClientID %>");

这允许所有 ASP.net 标记在使用 JS 代码传递到客户端之前先在服务器端进行解析。

关于javascript - 从外部 JS 文件调用时 document.getElementById() 返回 NULL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42044823/

相关文章:

多个线程上的 JavaScript setInterval

javascript - 如何在代理时向请求正文添加数据

c# - ASP.net MVC View 是 "class"吗?

Java:XML dom 解析仅检索数组的 1 个元素

javascript - 创建一个具有可变属性高度的半圆形饼图

javascript - 如何动态创建嵌套元素?

javascript - 网站保持加载向下滚动,而不是像它应该的那样在页面顶部

javascript - preventDefault() 不会在 Android 上停止 mouseup 事件

c# - 无法将匿名对象转换为 System.Data.DataRowView

asp.net - 文本阴影 CSS 在 IE11 中不起作用