So i'm trying to implemented outdated-browser
This requires 3 things
1. include their js and css which is not a problem via nuxt.config.js
and cdnjs
2. add <div id="outdated"></div>
somewhere, easy i can add this to layouts/default.vue
3. add the following javascript near the bottom of the body
tag.
//event listener: DOM ready
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
//call plugin function after DOM ready
addLoadEvent(function(){
outdatedBrowser({
bgColor: '#f25648',
color: '#ffffff',
lowerThan: 'transform',
languagePath: 'your_path/outdatedbrowser/lang/en.html'
})
});
This has to be inline and not included or it won't work properly. I've tried numerous times trying to inject it into layouts/defualt.vue
through something like
.container
nuxt
#outdated
| {{{ '<script>/* eslint-disable */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function(){ console.log("test one two"); outdatedBrowser({ bgColor: "#f25648", color: "#ffffff", lowerThan: "filter", languagePath: "/en.html" }) }); /* es-lint enable */ </script>' }}}
But it unforutnately escapes the string: != "function"
becomes != "function"
Is there any other proper way of doing this?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c945">#c945</a>)</em></sub></div>