Metamask登录检测监听器问题：未检测时容器内容为空

嘿，我来帮你搞定这个问题！你的容器显示为空，主要有两个关键细节没考虑到：

1. 缺少Metamask未检测到的分支处理 #

你当前的代码只在web3存在时才对#eth-address容器做操作，但完全没处理Metamask不存在的情况——这就是容器空着的直接原因。你需要添加else分支，专门处理这种场景，给容器追加提示消息。

2. 过时的Metamask检测逻辑 #

现在Metamask已经不再自动注入web3对象了，它只会注入window.ethereum。你原来的typeof web3 !== 'undefined'检测逻辑已经失效，就算用户装了Metamask，也可能被判定为未安装，进而触发错误分支。

修正后的完整代码 #

window.addEventListener('load', async function() {
  const addressContainer = document.getElementById('eth-address');
  // 用当前标准的Metamask检测方式
  if (window.ethereum) {
    try {
      // 请求用户授权获取钱包地址
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      addressContainer.textContent = `已连接钱包：${accounts[0]}`;
    } catch (error) {
      // 用户拒绝授权的情况
      addressContainer.textContent = '你拒绝了钱包授权请求';
    }
  } else {
    // Metamask未安装的提示
    addressContainer.textContent = '未检测到MetaMask，请安装后重试';
  }
});

代码说明 #

• 先获取容器元素，避免重复DOM查询
• 改用window.ethereum检测Metamask，这是官方当前推荐的方式
• 使用eth_requestAccounts方法请求用户授权，因为现在不能直接访问钱包地址，必须经过用户同意
• 增加了错误处理，覆盖用户拒绝授权的场景
• 明确添加了else分支，处理Metamask未安装的情况，确保容器始终有内容显示

内容的提问来源于stack exchange，提问作者oContis Studio