页面加载

Question

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

不幸的是我无法弄明白该怎么做。

我想做的是这样的事情：

betw：我使用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

我按照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);
});