Polymer与GWT在Firefox中无法正常工作问题排查

嘿，我来帮你理清楚这个问题～

首先得敲黑板划重点：Firefox完全不支持HTML Imports这个特性，而且这个标准本身已经被废弃了（就连Chrome也在后续版本里移除了原生支持）。你看到DOM里成功插入了<link rel="import">标签，但浏览器没发起GET请求，本质原因就是Firefox根本不认rel="import"这个属性，自然不会去加载对应的资源。

为什么Chrome之前能正常工作？ #

Chrome曾经对HTML Imports有原生支持，但后来也跟着标准废弃了这个功能，现在如果还能在某些旧版Chrome里看到效果，只是因为遗留支持而已。

给你几个可行的解决办法 #

针对你在GWT的onModuleLoad()之后加载外部HTML资源的场景，可以试试这些方案：

• 手动用AJAX加载HTML内容
  既然浏览器不自动处理，那就自己动手发起请求加载。在GWT里可以用RequestBuilder来实现：

  RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "你的目标HTML文件路径");
  builder.sendRequest(null, new RequestCallback() {
      @Override
      public void onResponseReceived(Request request, Response response) {
          if (response.getStatusCode() == 200) {
              // 把加载到的HTML内容插入到页面指定位置
              Element container = Document.get().getElementById("要插入的容器ID");
              container.setInnerHTML(response.getText());
          }
      }
  
      @Override
      public void onError(Request request, Throwable exception) {
          // 处理加载失败的情况
          Window.alert("加载HTML文件失败：" + exception.getMessage());
      }
  });
  

• 切换到现代的Web Components加载方式
  如果你的HTML Import是为了加载Web Components，现在推荐用ES Modules的import语句来导入组件，或者用@webcomponents/webcomponentsjs这个polyfill来兼容更旧的浏览器（不过现在Firefox对标准Web Components的支持已经很完善了）。

• 检查polyfill是否正确加载
  如果你之前以为注入后应该能工作，可能是默认假设页面已经引入了HTML Imports的polyfill（比如webcomponents-lite.js）。如果是这种情况，一定要确保polyfill在你的GWT代码执行之前就加载完成，不然注入标签的时候polyfill还没生效，也不会触发资源加载。

最后提个醒 #

HTML Imports已经是被废弃的标准了，MDN上也明确标注了不再推荐使用，所以建议尽快迁移到现代的资源加载方案，避免后续浏览器版本更新带来更多兼容性问题。

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