如何根据浏览器类型切换显示不同HTML区块（Firefox适配）

最优实现思路 #

通过JavaScript检测浏览器类型，动态生成对应HTML结构，同时仅在非Firefox环境下加载PayPal捐赠脚本，减少不必要的资源请求，提升页面性能。

具体代码实现 #

1. 先在HTML中预留容器节点：

<li class="nav-item" id="donate-nav-item"></li>

2. 添加JavaScript逻辑实现浏览器检测与内容渲染：

const donateContainer = document.getElementById('donate-nav-item');
// 检测Firefox浏览器（兼容新旧版本）
const isFirefox = navigator.userAgent.includes('Firefox') || typeof InstallTrigger !== 'undefined';

if (isFirefox) {
    // 渲染Firefox专属的跳转按钮
    donateContainer.innerHTML = `
        <a class="nav-link" href="{{site.baseurl}}/donate.html">
            <button class="button-18" role="button">Faire un don</button>
        </a>
    `;
} else {
    // 构建PayPal捐赠按钮容器
    const donateButtonDiv = document.createElement('div');
    donateButtonDiv.id = 'donate-button';
    
    const containerDiv = document.createElement('div');
    containerDiv.id = 'donate-button-container';
    containerDiv.appendChild(donateButtonDiv);
    
    // 动态加载PayPal SDK脚本，加载完成后渲染按钮
    const paypalScript = document.createElement('script');
    paypalScript.src = 'https://www.paypalobjects.com/donate/sdk/donate-sdk.js';
    paypalScript.charset = 'UTF-8';
    paypalScript.onload = function() {
        PayPal.Donation.Button({
            // 替换为你的PayPal配置参数
            business: 'your-donation-email@example.com',
            item_name: 'Votre don',
            currency_code: 'EUR'
            // 其他需要的配置项...
        }).render('#donate-button');
    };
    
    containerDiv.appendChild(paypalScript);
    donateContainer.appendChild(containerDiv);
}

方案优势 #

• 资源按需加载：仅非Firefox浏览器会加载PayPal SDK，避免Firefox环境下的冗余请求
• 检测可靠性：结合userAgent和Firefox独有的InstallTrigger对象，提升浏览器检测准确率
• 可维护性：逻辑集中在JS中，后续修改按钮内容或配置只需调整对应代码块

备选方案（CSS方式，局限性较大） #

如果偏好纯CSS实现，可利用Firefox专属的@-moz-document规则，但无法阻止PayPal脚本加载，仅适合简单场景：

<li class="nav-item">
    <!-- Firefox显示内容 -->
    <a class="nav-link firefox-only" href="{{site.baseurl}}/donate.html">
        <button class="button-18" role="button">Faire un don</button>
    </a>
    
    <!-- 其他浏览器显示内容 -->
    <div id="donate-button-container" class="non-firefox-only">
        <div id="donate-button"></div>
        <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
        <script>
            PayPal.Donation.Button({
                // 配置参数...
            }).render('#donate-button');
        </script>
    </div>
</li>

<style>
/* 默认隐藏Firefox内容 */
.firefox-only {
    display: none;
}
/* Firefox下显示专属内容，隐藏其他内容 */
@-moz-document url-prefix() {
    .firefox-only {
        display: block;
    }
    .non-firefox-only {
        display: none;
    }
}
</style>

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