document.getElementById()仅在Edge中返回null的技术求助

问题现象 #

部署的Web3 NFT合约DApp在Firefox和Chrome中运行正常，但在Edge浏览器里无法正常工作。DApp需要连接加密钱包才能使用交互界面，未连接时无法操作。核心问题是JavaScript的document.getElementById("elementName")方法在Edge中返回null，其他浏览器能正常获取元素并调整控件。

相关代码 #

HTML文件 #

<html lang="en">
  <head>
    <title>Road to Web3 - Week 01 - Develop an NFT Contract.</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
    <script src="FileUtils.js"></script>
    <script src="WalletUtils.js"></script>
    <script src="SmartPlug.js"></script>
    <script src="interfaceScripts.js"></script>
    <style>
      p {
          margin-left: 2%;
          margin-right: 2%;
      }
      .center {
        margin: auto;
        width: 60%;
        padding: 10px;  
      }
   </style>
  </head>
<body>
 <p align = "right">
  <button id="connectionButton">Is wallet connected?</button>
</p>
  <div id = "siteGreetingDiv">
    <h1><p align = "center">Road to Web 3 - Week 01</p></h1>
    <h2><p align = "center">Develop an NFT Contract</p></h2>
    <h3><p align = "center" id = "WelcomeParagraph">Welcome, visitor!</p></h3>
  </div>
  <br/>
  <div id = "unknownUser" class="center">
    <p>To interact with the deployed smart contract, please connect to a wallet.</p>
  </div>
  <div id = "loggedUI" class = "center">
  <label for = "userName">Set or change your user name:</label>
  <input type="text" id="userName" name="userName">
  <button onclick="setNewUsername()">
    Set New Username
  </button>
  <br/>
  <p align = "justify" id = "setUserNameResults"></p>
  <button onclick="getMintedAmount()">
    Check amount of minted NFTs
  </button>
  <p align = "justify" id = "getMintedAmountResults">
    How many NFTs has the user minted?<br /></p>
  <br/>
  <label for = "metadataUrl">Enter the 'metadata.json' url:</label>
  <input type="text" id="metadataUrl" name="metadataUrl">
  <button onclick="mintAnNFT()">
    Mint NFT
  </button>
  <p align = "justify" id = "mintedNFTResults"><br /></p>
  <br/>
</div>
</body>
</html>

interfaceScripts.js代码片段 #

async function startDapp() {
    const walletStatus = await isWalletConnected();
    const connectionButton = document.getElementById("connectionButton");
    const loggedUI = document.getElementById("loggedUI");
    const unknownUser = document.getElementById("unknownUser");
    if(walletStatus == "No wallet installed") {
        setEvent(connectionButton, "click", walletInstructions);
        connectionButton.innerHTML = "Why do I need a wallet extension?";
        loggedUI.style.display = "none";
        unknownUser.style.display = "block";
    }
    else if(walletStatus == "Connected") {
        const account = await getWalletAddress();
        connectionButton.innerHTML = "[" + account +"]";
        removeEvent(connectionButton, "click", walletInstructions);
        removeEvent(connectionButton, "click", connectToWallet);
        loggedUI.style.display = "block";
        unknownUser.style.display = "none";
    } else { // Disconnected
        removeEvent(connectionButton, "click", walletInstructions);
        setEvent(connectionButton, "click", connectToWallet);
        connectionButton.innerHTML = "Connect to a wallet";
        loggedUI.style.display = "none";
        unknownUser.style.display = "block";
    }
}

// Runs whenever the user changes account state;
// Checking if there is a wallet installed first, of course!
if (typeof window.ethereum !== 'undefined') {
    window.ethereum.on('accountsChanged', async () => {
        startDapp();
    });
}
startDapp();

解决思路 #

1. 确保DOM加载完成后再执行JS代码 #

当前JS脚本放在<head>中，会在DOM元素渲染前执行，Edge的DOM加载时序可能和Chrome/Firefox有差异，导致获取元素时DOM还没构建完成。

• 方案1：把所有<script>标签移到<body>的末尾，确保DOM完全加载后再执行JS。
• 方案2：给startDapp()添加DOM加载监听，修改代码如下：

// 替换原来的startDapp()调用
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", startDapp);
} else {
    startDapp();
}

2. 检查Edge的隐私/安全设置 #

Edge的某些隐私设置（比如跟踪防护）可能会阻止Web3钱包注入window.ethereum，进而导致后续代码逻辑异常，间接影响元素获取。

• 打开Edge设置，进入「隐私、搜索和服务」，暂时关闭「跟踪防护」，测试是否恢复正常。
• 确认钱包扩展在Edge中已启用，且有权限访问当前站点。

3. 调试Edge的控制台日志 #

打开Edge开发者工具（F12），切换到「控制台」标签，查看是否有报错信息：

• 检查isWalletConnected()、getWalletAddress()等函数是否在Edge中抛出异常，导致后续获取元素的代码未执行。
• 直接在控制台执行document.getElementById("connectionButton")，确认元素是否真的不存在，还是代码执行时机问题。

4. 调整异步代码执行顺序 #

startDapp()是异步函数，await isWalletConnected()可能会在Edge中导致代码执行延迟，而此时DOM可能还未完全就绪。可以先获取DOM元素，再执行异步操作：

async function startDapp() {
    // 先获取DOM元素，再执行异步操作
    const connectionButton = document.getElementById("connectionButton");
    const loggedUI = document.getElementById("loggedUI");
    const unknownUser = document.getElementById("unknownUser");
    
    const walletStatus = await isWalletConnected();
    
    // 后续逻辑保持不变
    if(walletStatus == "No wallet installed") {
        setEvent(connectionButton, "click", walletInstructions);
        connectionButton.innerHTML = "Why do I need a wallet extension?";
        loggedUI.style.display = "none";
        unknownUser.style.display = "block";
    }
    // ... 其余代码
}

内容的提问来源于stack exchange，提问作者Andre Soeiro