頁面加載后僅重新加載一個文件（在之間切換）

Question

頁面加載后（通過選擇），我必須在多個文件（用戶主題選擇）之間切換。

不幸的是我不知道該怎么做。

我想做的是這樣的：

順便說一句：我使用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>

這有可能嗎？

幫助將不勝感激:-)

Answer 1

我遵循此答案使其正常工作，所以我更改了代碼的幾部分。

我現在使用.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);
});