我已经查看了与此问题相关的所有其他问题/解决方案,但找不到解决方案。
我有一个带有按钮的基本 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/