如何基于浏览器检测切换图片？现有代码无法正常工作求助

Hey there! Let's fix that browser-specific image loading issue you're having. I noticed your code got cut off, but the core problem is probably either incomplete browser detection logic or not properly targeting the image element to update its source. Here's a full, working implementation that'll show Image1 for Chrome and Image2 for IE:

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>浏览器专属图片切换</title>
    <script>
        function browserCheck() {
            // 获取浏览器的用户代理字符串
            const userAgent = navigator.userAgent;
            // 获取页面中的图片元素
            const targetImage = document.getElementById('dynamicImage');
            
            // 检测IE浏览器：兼容旧版IE(含MSIE)和IE11(含Trident)
            const isIE = userAgent.indexOf('MSIE ') !== -1 || userAgent.indexOf('Trident/') !== -1;
            // 检测Chrome浏览器：排除新版Edge(它的UA也会包含Chrome字样)
            const isChrome = userAgent.indexOf('Chrome') !== -1 && userAgent.indexOf('Edg') === -1;
            
            if (isIE) {
                targetImage.src = 'Image2.jpg'; // 替换为你的IE图片路径
                targetImage.alt = 'IE专属图片';
            } else if (isChrome) {
                targetImage.src = 'Image1.jpg'; // 替换为你的Chrome图片路径
                targetImage.alt = 'Chrome专属图片';
            } else {
                // 其他浏览器的备选图片（可选）
                targetImage.src = 'fallbackImage.jpg';
                targetImage.alt = '默认图片';
            }
        }
        
        // 页面加载完成后执行检测，确保图片元素已存在于DOM中
        window.addEventListener('load', browserCheck);
    </script>
</head>
<body>
    <!-- 预留图片元素，初始状态为空，由JS动态填充 -->
    <img id="dynamicImage" src="" alt="图片加载中..." />
</body>
</html>

关键细节说明 #

• 准确的浏览器检测：
  • IE的检测覆盖了旧版本（带MSIE标识）和IE11（带Trident标识，因为IE11不再使用MSIE字样）。
  • Chrome的检测额外排除了新版Edge，因为基于Chromium的Edge会在UA中包含Chrome，加上Edg的判断可以避免混淆。
• DOM加载时机：使用window.addEventListener('load', ...)确保在页面所有元素加载完成后再执行检测，避免出现找不到图片元素的错误。
• 路径正确性：请确保替换代码中的图片路径与你的实际文件位置匹配（同一目录直接写文件名，子目录写相对路径如./images/Image1.jpg）。

常见问题排查 #

• 如果图片仍不显示，先检查控制台是否有错误（按F12打开开发者工具），大概率是图片路径错误或元素ID不匹配。
• 测试IE时，可使用Edge的IE模式（设置中开启"Internet Explorer模式"），因为IE本身已停止支持。

内容的提问来源于stack exchange，提问作者Rahul Sharma