[英]Reload only one (switch between) file after page load
I have to switch between several files (User theme choice) after page load (through select). 页面加载后(通过选择),我必须在多个文件(用户主题选择)之间切换。
Unfortunately i can't figure out how to do it. 不幸的是我不知道该怎么做。
What i want to do is something like this: 我想做的是这样的:
betw: I use Polymer.js 顺便说一句:我使用Polymer.js
Script: 脚本:
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 的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>
Is this even possible? 这有可能吗?
Help would be greatly appreciated :-) 帮助将不胜感激:-)
I followed this answers to get it work so I changed few parts of my code. 我遵循此答案使其正常工作,所以我更改了代码的几部分。
Instead of using html dom-modules i use now .ccs files. 我现在使用.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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.