页面加载后仅重新加载一个（切换）文件答案

【问题标题】：Reload only one (switch between) file after page load页面加载后仅重新加载一个（切换）文件
【发布时间】：2016-10-09 11:20:21
【问题描述】：

页面加载后（通过选择），我必须在多个文件（用户主题选择）之间切换。

不幸的是，我不知道该怎么做。

我想做的是这样的：

顺便说一句：我使用 Polymer.js

脚本：

 document.addEventListener('select-theme', function(e){
  // The event is fired from a nested component.

  console.log('select-theme: ', e.detail.themeValue)
  var theme = e.detail.themeValue;
  var importTag = document.getElementById('themeImport');
  var style = document.getElementById('style');
  var stylePath;
  var importPath;

  if(theme == "Green"){
     importPath = "../app-theme-green.html";
     stylePath ="app-theme-green";
  }else{
    importPath = "../app-theme-default.html";
    stylePath ="app-theme-default";
  }

  importTag.setAttribute('href', importPath);
  style.setAttribute('include', stylePath);
  //Load new file
});

HTML

<link id="themeImport" rel="import" href="../app-theme-green.html">

<template is="dom-bind" id="app">
    <style id="style" is="custom-style" include="app-theme-green"></style>
    // ... some content
</template>

这可能吗？

非常感谢您的帮助:-)

【问题讨论】：

标签： javascript css dynamic import polymer

【解决方案1】：

我按照this 的回答让它工作，所以我更改了我的代码的几个部分。

我现在使用 .ccs 文件，而不是使用 html dom-modules。

document.addEventListener('select-theme', function(e){
  console.log('select-theme: ', e.detail.themeValue)
  var theme = e.detail.themeValue;
  var importPath;

  if(theme == "Green"){
     importPath = "../app-theme-green.css";
  }else{
     importPath = "../app-theme-default.css";
  }

  var head  = document.getElementsByTagName('head')[0];
      var link  = document.createElement('link');
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = importPath;
      link.media = 'all';
      head.appendChild(link);
});

【讨论】：