prevent Javascript cacehing by appending timestamp or version - javascript

I want to append a random number or a timestamp at the end of the javascript files(large number of js and css files) source path in so that every time the page reloads it should download a fresh copy.
for the list of js and css files, code below will not work for list of js,css files.
<script type="text/javascript">
(function() {
var randomh = Math.random();
var e = document.getElementsByTagName("script");
var d = document.createElement("script");
d.src = e.src+"?x=" + randomh + "";
d.type = "text/javascript";
d.async = true;
d.defer = true;
e.parentNode.insertBefore(d, e);
})();
</script>

Related

write script without CDATA and Merge two scripts with same functions

I have these scripts which are almost the same but I'm unable to merge them into one..
also I want remove "CDATA" and keep the script functioning in blogger XML template
<script type='text/javascript'>// <![CDATA[
!function(){const e=document.querySelectorAll(".vplayer");for(var t=0;t<e.length;t++){console.log(e[t].dataset.v);const a="//i.ytimg.com/vi_webp/"+e[t].dataset.v+"/hqdefault.webp";var n=new Image;n.src=a,n.addEventListener("load",void e[t].appendChild(n)),e[t].addEventListener("click",function(){const e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("frameborder","0"),e.setAttribute("src","//www.youtube.com/embed/"+this.dataset.v+"?rel=0&showinfo=0&autoplay=1&iv_load_policy=3&modestbranding=1&noCookie=false&origin=https%3A%2F%2Fwww.xotaku.com&widgetid=1"),this.innerHTML="",this.appendChild(e)})}}();// ]]></script>
and that the second
<script type='text/javascript'>// <![CDATA[
!function(){const e=document.querySelectorAll(".vplayerold");for(var t=0;t<e.length;t++){console.log(e[t].dataset.v);const a="//i.ytimg.com/vi/"+e[t].dataset.v+"/hqdefault.jpg";var n=new Image;n.src=a,n.addEventListener("load",void e[t].appendChild(n)),e[t].addEventListener("click",function(){const e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("frameborder","0"),e.setAttribute("src","//www.youtube.com/embed/"+this.dataset.v+"?rel=0&showinfo=0&autoplay=1&iv_load_policy=3&modestbranding=1&noCookie=false&origin=https%3A%2F%2Fwww.xotaku.com&widgetid=1"),this.innerHTML="",this.appendChild(e)})}}();// ]]></script>
the scripts are the same and I dont want write the whole of it twice
I want this
const e = document.querySelectorAll(".vplayer");
to work with that
const a = "//i.ytimg.com/vi_webp/" + e[t].dataset.v + "/hqdefault.webp";
and this
const e = document.querySelectorAll(".vplayerold");
to work with that
const a="//i.ytimg.com/vi/"+e[t].dataset.v+"/hqdefault.jpg";
the rest of scripte work with both as well
I want remove "CDATA" and keep the script functioning in blogger XML template
That's not possible. It's pretty much required for valid XML unless you want to use escape sequences for <>'".
the scripts are the same and I dont want write the whole of it twice
Make that IEFE a named function declaration, give it parameters, call it twice with different arguments.
<script type="text/javascript">//<![CDATA[
function createPlayer(selector, makeUrl) {
const e = document.querySelectorAll(selector);
for (var t = 0; t < e.length; t++) {
console.log(e[t].dataset.v);
const a = makeUrl(e[t].dataset.v);
var n = new Image;
n.src = a;
n.addEventListener("load", void e[t].appendChild(n));
e[t].addEventListener("click", function() {
const e = document.createElement("iframe");
e.setAttribute("allowfullscreen", "");
e.setAttribute("frameborder", "0");
e.setAttribute("src", "//www.youtube.com/embed/" + this.dataset.v + "?rel=0&showinfo=0&autoplay=1&iv_load_policy=3&modestbranding=1&noCookie=false&origin=https%3A%2F%2Fwww.xotaku.com&widgetid=1");
this.innerHTML = "";
this.appendChild(e);
})
}
}
createPlayer(".vplayer", v => "//i.ytimg.com/vi_webp/" + v + "/hqdefault.webp");
createPlayer(".vplayerold", v => "//i.ytimg.com/vi/" + v + "/hqdefault.jpg");
//]]></script>
Merged example
You mean like this?
<script type='text/javascript'>// <![CDATA[
!function(){const e=document.querySelectorAll(".vplayer");for(var t=0;t<e.length;t++){console.log(e[t].dataset.v);const a="//i.ytimg.com/vi_webp/"+e[t].dataset.v+"/hqdefault.webp";var n=new Image;n.src=a,n.addEventListener("load",void e[t].appendChild(n)),e[t].addEventListener("click",function(){const e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("frameborder","0"),e.setAttribute("src","//www.youtube.com/embed/"+this.dataset.v+"?rel=0&showinfo=0&autoplay=1&iv_load_policy=3&modestbranding=1&noCookie=false&origin=https%3A%2F%2Fwww.xotaku.com&widgetid=1"),this.innerHTML="",this.appendChild(e)})}}();
!function(){const e=document.querySelectorAll(".vplayerold");for(var t=0;t<e.length;t++){console.log(e[t].dataset.v);const a="//i.ytimg.com/vi/"+e[t].dataset.v+"/hqdefault.jpg";var n=new Image;n.src=a,n.addEventListener("load",void e[t].appendChild(n)),e[t].addEventListener("click",function(){const e=document.createElement("iframe");e.setAttribute("allowfullscreen",""),e.setAttribute("frameborder","0"),e.setAttribute("src","//www.youtube.com/embed/"+this.dataset.v+"?rel=0&showinfo=0&autoplay=1"),this.innerHTML="",this.appendChild(e)})}}();
// ]]>
</script>
Adding them in separate script tags should also work, depending what your backend allows you to do.

Display a waiting gif during a javascript function

I write a script to get a text file, to modify this texter file and then I import the file in our software.
The problem is that the import of the file is very slow (just this part of the script could take more than 1 minute sometime).
I would like to display a waiting gif during this process, so the user can see that the process is running, and he need to wait.
Some precision:
- It's only a javascript file with no html page
- The script is launched with a button in our software and I have access to ActiveXObject if necessary
Here is a sample code :
function importFec()
{
var iOpenDlg = 1;
var sPath = "Deskop";
var sTypes = "Fichier Texte (*.txt)|*.txt";
var sExt = "txt";
//Allow me to select a file in Windows
cheminFEC = fileDialog(iOpenDlg, sPath, sTypes, sExt);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var ForReading = 1;
var f1 = fso.OpenTextFile(cheminFEC, ForReading);
var texte = f1.ReadAll();
var tableauFEC = [];
var tableauTest = [];
tableauFEC = texte.split(/\r\n/);
tableauTest = tableauFEC[0].split("\t");
var delimiter = "\t";
if (tableauTest.length == 1)
{
tableauTest = tableauFEC[0].split("|");
var delimiter = "|";
}
var nbColonne = tableauTest.length;
for (var i=0;i<tableauFEC.length;i++)
{
var tab = tableauFEC[i].split(delimiter);
tableauFEC[i] = new Array(25);
for (var j=0;j<nbColonne;j++)
{
tableauFEC[i][j] = tab[j];
}
}
//Make some change in the table to adapt my texte file
//Then create a new texte file C:\\FichierFEC\\FECModifie.txt
createNewFEC(tableauFEC);
var cwfConfiguration = Application.ApplicationInfo("ProgramPath")+"\\Library\\ImportFEC\\ImportFEC23032017.vgl"
var oImport = Import(ipASCII)
oImport.ImportComponents = CWImportComponents.icGeneralLedger
oImport.ASCIILayoutFile = cwfConfiguration
oImport.ASCIIDataFile = "C:\\FichierFEC\\FECModifie.txt"
//This is the function which take a long moment to execute
oImport.RunImport()
}
Thanks for your answer and explanation
I finnaly found another solution.
At the beggining of my script, I launch a .hta file with a GIF and a small texte.
At the end of my script, I close the .hta file
Thanks

How to change the indentation of new added script tag content

i'm using the following code to insert new script with content to HTML file,
Currently the following code is working and the new script is inserted after the first existing script, the problem is the content is not indent
e.g. this is the output of the new added script(as you can see its in one line)
<script> var keyOfFilesArray = Object.keys(data)[0]; var filesArray = data[keyOfFilesArray]; </script>
I want to change it to be indented like following:
the second added open script tag will be inserted line after the closing tag of the first script
the vars should be inserted one after other to be like this
<script>
var keyOfFilesArray = Object.keys(data)[0];
var filesArray = data[keyOfFilesArray];
</script>
How I can do that ? I belive I need to add the /n but not sure where is the best way to insert it...
https://jsfiddle.net/k32ntkr8/
This is the JS code
btn.onclick = function(e){
debugger;
var innerhtml = [
' var keyOfFilesArray = Object.keys(data)[0];',
' var filesArray = data[keyOfFilesArray]; '
].join('');
var html = process(input.defaultValue,innerhtml);
output.value = html;
}
function process(html,innerhtml) {
var escapedHTML = html
.replace(/body/g, 'body$')
.replace(/head/g, 'head$');
sandbox.innerHTML = escapedHTML;
var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0];
var newScript = document.createElement('script');
newScript.innerText = innerhtml;
script.parentNode.insertBefore(newScript, script.nextSibling);
var unescapedHTML = sandbox.innerHTML
.replace(/body\$/g, 'body')
.replace(/head\$/g, 'head')
.replace(/"/g, "'");
return (
'<!DOCTYPE HTML>\n<html>' +
unescapedHTML +
'</html>'
);
};
How it can be done? please suggest ,the answer below doesn't help much...
if I can improve this question somehow please let me know.
Something like this?
var innerhtml = [
'\tvar keyOfFilesArray = Object.keys(data)[0];',
'\tvar filesArray = data[keyOfFilesArray];'
].join("\n");
var script_code = '<script>\n' + innerhtml + '\n<\/script>';
Then just insert the script_code variable wherever you want it to appear on the page.
https://jsfiddle.net/e72c17zg/1/
Ok, if you change your onclick handler to this
btn.onclick = function(e){
debugger;
var innerhtml = [
'',
' <script>',
' var keyOfFilesArray = Object.keys(data)[0];',
' var filesArray = data[keyOfFilesArray]; ',
' <\/script>'
].join('\n');
var html = process(input.defaultValue,innerhtml);
output.value = html;
}
And change the lines of process that populate the script to this
var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0];
script.parentNode.insertAdjacentHTML('afterBegin', innerhtml);
You should get this output
<head>
<script>
var keyOfFilesArray = Object.keys(data)[0];
var filesArray = data[keyOfFilesArray];
</script>
...
</head>

Load random post on blogger(change onclick to onload)

I have added a random post button to my site (http://factowy.blogspot.com). I want to load random post as the page loads instead of clicking the button. How can I do that? Here is the code for the random post button.
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Fact'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>
You need something like this.
<body onload='showLucky()'>
Go to Blogger > Layout > Edit HTML and replace <body> with above mentioned code and check.
It's just way you would call function on page load. I haven't tried with your function.
I was able to load random post with the following code:
window.onload = function(){fetchLuck(a.rel);}

How to pass back a unique ID with JavaScript or PHP?

I need to pass back a unique ID in place of "INSERT+ORDER+ID" for when a user clicks on our "Request Information" button to better track our visitors. Does anyone know how I can accomplish this? Any help would be much appreciated, thanks!
<script type="text/javascript">
var _qevents = _qevents || [];
(function() {
var elem = document.createElement('script');
elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") +
".quantserve.com/quant.js";
elem.async = true;
elem.type = "text/javascript";
var scpt = document.getElementsByTagName('script')[0];
scpt.parentNode.insertBefore(elem, scpt);
})();
_qevents.push(
{qacct:"p-yeADJca0S9FXE",labels:"_fp.event.Request Information Confirmation
Page",orderid:"INSERT+ORDER+ID"}
);
</script>
<noscript>
<img src="//pixel.quantserve.com/pixel
/p-yeADJca0S9FXE.gif?labels=_fp.event.Request+Information+Confirmation+Page&
orderid=INSERT+ORDER+ID" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
</noscript>
assuming you mean a random unique ID,
for the javascript event tracking this should work:
// function to generate random id in js
function getRandomId() {
var id = +new Date() + Math.random();
return id.toString().replace('.','');
}
var btnReqInfo = document.getElementById('request_information_btn');
// bind the click on button
btnReqInfo.addEventListener('click', function() {
// track the event
_qevents.push({ qacct:"p-yeADJca0S9FXE", labels: "_fp.event.Request Information ConfirmationPage",orderid: getRandomId() });
, false);
About the content in the noscript tag, you can't do it with static html of course so you have to put in the context of your template (in the php file), something like this that generates a unique ID and then echo it in place of your placeholder.
Since I'm in the mood for structuring and cleaning, I took the liberty of refactoring a bit the code, in case, you can replace all your script with this (assuming you're using plain js (vanilla) and html 5):
<script>
var _qevents = _qevents || [];
(function() {
var
init = function() {
loadScript();
bindUi();
},
loadScript = function() {
var elem = document.createElement('script');
elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
elem.async = true;
elem.type = "text/javascript";
var scrpt = document.getElementsByTagName('script')[0];
scrpt.parentNode.insertBefore(elem, scrpt);
},
bindUi = function() {
var btnReqInfo = document.getElementById('request_information_btn');
btnReqInfo.addEventListener('click', track.order, false);
},
track = {
order: function() {
_qevents.push({ qacct:"p-yeADJca0S9FXE", labels: "_fp.event.Request Information ConfirmationPage", orderid: utils.getRandomId() });
}
},
utils = {
getRandomId : function() {
var id = +new Date() + Math.random();
return id.toString().replace('.','');
}
};
init();
})();
</script>
I would suggest using an AJAX call that is binded to the onclick event or .click if you're using JQuery
The AJAX call would hit a PHP script or call whatever you're using for analytics.

Categories