导入外部HTML的JavaScript在Chrome正常，IE与Firefox失效求助

嘿，这问题我门儿清！你用的<link rel="import">是HTML Imports特性，这玩意儿早就被Web标准废弃了，只有旧版Chrome/Edge（Chromium内核之前的版本）支持，Firefox和IE从始至终都没实现过这个API，所以你的脚本在这些浏览器里直接“罢工”了。

给你几个靠谱的替代方案，都能搞定加载外部导航栏的需求：

方案1：原生Fetch API（无依赖） #

纯原生JS实现，兼容所有现代浏览器（IE11需要加个polyfill）：

// 替换成你的导航栏HTML文件实际路径
fetch('/your-navbar.html')
  .then(function(response) {
    if (!response.ok) {
      throw new Error('加载导航栏失败：' + response.statusText);
    }
    return response.text();
  })
  .then(function(html) {
    document.getElementById('navBar').innerHTML = html;
    // 注意：如果导航栏里有Bootstrap交互组件（比如下拉菜单、折叠面板）
    // 加载完HTML后需要手动初始化，比如：
    // document.querySelectorAll('.dropdown-toggle').forEach(el => new bootstrap.Dropdown(el));
  })
  .catch(function(error) {
    console.error('出错啦：', error);
  });

要是得兼容IE11，记得引入whatwg-fetch polyfill，再把箭头函数改成普通函数就行。

方案2：jQuery.load()（已有jQuery的话更省心） #

如果你的项目已经在用jQuery，这个方法超简洁：

$('#navBar').load('/your-navbar.html', function(response, status, xhr) {
  if (status === 'error') {
    console.error('加载失败：', xhr.status + ' ' + xhr.statusText);
  } else {
    // 同样，这里可以初始化Bootstrap组件
  }
});

方案3：服务器端包含（性能最优） #

如果你的服务器支持的话，这是最好的方案——HTML在服务器端就合并好了，不用客户端JS折腾：

• Apache用SSI：

<!--#include virtual="/your-navbar.html" -->

• PHP用包含：

<?php include '/your-navbar.html'; ?>

不管用哪种方案，动态加载完导航栏HTML后，要是里面有Bootstrap的交互组件，一定要确保Bootstrap JS已经加载完成，并且手动初始化这些组件（动态插入的DOM不会自动触发Bootstrap的初始化哦）。

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