document.getElementById() 从外部 JS 文件调用时返回 NULL
Posted
技术标签:
【中文标题】document.getElementById() 从外部 JS 文件调用时返回 NULL【英文标题】：document.getElementById() returns NULL when called from external JS file 【发布时间】：2017-06-22 00:56:45 【问题描述】：我查看了与此问题相关的所有其他问题/解决方案，但找不到解决方案。
我有一个带有按钮的基本 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 中的文档对象相同。
提前致谢 迈克尔
【问题讨论】：
是你的js文件function2.js的名字吗？？ 请看下面的答案。您实际上是在.js 文件中混合服务器端代码 <%= ...%>。
【参考方案1】：
据我所知，元素的名称是由 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);
当然，外部 JS 文件必须在创建变量 id 之后包含在内。或者，更好的解决方案是将 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 代码交付给客户端之前在服务器端进行解析。
【讨论】：
谢谢...这很有意义。 ASP 不会解析和处理 .js 文件。感谢您的回答！ @WebDrive 当然，没问题。总是乐于提供帮助！以上是关于document.getElementById() 从外部 JS 文件调用时返回 NULL的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 中的 document.getElementById().innerText
打字稿中的 document.getElementById(s).document.getElementsByClassName 错误
为啥不需要 document.getElementById？ [复制]
document.getElementById/Name/TagName