We Keep Coding

Execute javascript code after AJAX request

I have created a cookie banner related plugin for my site and now I would like to run the tracking code scripts once the user accepts the cookie banner.
I was able to inject the code with insertAdjacentHTML and now I would like to figure out how to execute this code so that the related tracking cookies are triggered.
I have seen eval(), but I have also seen that it is not a recommended function and it opens a security hole.
This is my code:
http.onreadystatechange = function() { //Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
var con_cod = JSON.parse(this.responseText);
var consents = con_cod["consents"];
var head = document.getElementsByTagName("head")[0];
var code_before_end_head = con_cod["code_before_end_head"];
head.lastElementChild.insertAdjacentHTML("afterend", code_before_end_head);
var now = new Date();
var time = now.getTime();
var expireTime = time + 24 * 60 * 60 * 1000;
now.setTime(expireTime);
document.cookie = cookie_name+'='+JSON.stringify(consents)+'; expires='+now.toUTCString()+'; SameSite=None; Secure; path=/';
}
}
http.send(params);
How can I solve this situation? Of course I could also make the page reload, but this is not a good user experience for my visitors.
UPDATE:
I am using the code given here as recommended in the comments:
Jquery cookie monitor
I am now able to see when the cookie is created and modified and give a response accordingly.
I am currently using alerts to make sure of this, but now I would need to run external JavaScript code such as Hotjar or Google Analytics code that if it is just injected (which I am doing) will not run.
This for example is the Hotjar JavaScript code that I am trying to run unsuccessfully:
<!-- Hotjar Tracking Code -->
<script id="gcbi-statistics">
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:7349271,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

I was able to find a much simpler solution.
This is the code I used to inject the various scripts and have them run once inserted:
// Remove comments and HTML tags using the replace function and a regular expression
var plainText = code_before_end_head[key_cod].replace(/<!--[\s\S]*?-->|<[^>]*>/g, '');
// Create a new script element
const script = document.createElement('script');
// Assigns an ID to the script element
script.id = 'gcbi-'+key_con;
// Assigns the code to be executed to the script element
script.innerHTML = plainText;
// Injects the script element into the head section of the document
document.head.appendChild(script);
There was no need to use the listenCookieChange function since everything is done via AJAX.
The code shown above was just inserted inside the request when receiving response from the PHP file.
I hope it can help!

How to detect if any of css/js files failed to load and alert user to refresh browser [duplicate]

I have an HTML page where several JavaScript, CSS and images files are referenced. These references are dynamically injected and user can manually copy the HTML page and the support files to another machine.
If some JS or CSS are missing, the browser complains in the console. For example:
Error GET file:///E:/SSC_Temp/html_005/temp/Support/jquery.js
I need somehow these errors reported back to me on the inline JavaScript of the HTML page so I can ask user to first verify that support files are copied correctly.
There's the window.onerror event which just inform me that there's a JS error on the page such as an Unexpected Syntax error, but this doesn't fire in the event of a 404 Not Found error. I want to check for this condition in case of any resource type, including CSS, JS, and images.
I do not like to use jQuery AJAX to verify that file physically exists - the I/O overhead is expensive for every page load.
The error report has to contain the name of the file missing so I can check if the file is core or optional.
Any Ideas?

To capture all error events on the page, you can use addEventListener with the useCapture argument set to true. The reason window.onerror will not do this is because it uses the bubble event phase, and the error events you want to capture do not bubble.
If you add the following script to your HTML before you load any external content, you should be able to capture all the error events, even when loading offline.
<script type="text/javascript">
window.addEventListener('error', function(e) {
console.log(e);
}, true);
</script>
You can access the element that caused the error through e.target. For example, if you want to know what file did not load on an img tag, you can use e.target.src to get the URL that failed to load.
NOTE: This technically will not detect the error code, it detects if the image failed to load, as it technically behaves the same regardless of the status code. Depending on your setup this would probably be enough, but for example if a 404 is returned with a valid image it will not trigger an error event.

you can use the onload and onerror attributes to detect the error
for example upon loading the following html it gives alert error1 and error2 you can call your own function e.g onerror(logError(this);) and record them in an Array and once the page is fully loaded post is with single Ajax call.
<html>
<head>
<script src="file:///SSC_Temp/html_005/temp/Support/jquery.js" onerror="alert('error1');" onload="alert('load');" type="text/javascript" ></script>
</head>
<body>
<script src="file:///SSC_Temp/html_005/temp/Support/jquery.js" onerror="alert('error2');" onload="alert('load');" type="text/javascript" ></script>
</body>
</html>

I've put together the code below in pure JavaScript, tested, and it works.
All the source code (html, css, and Javascript) + images and example font is here: on github.
The first code block is an object with methods for specific file extensions: html and css.
The second is explained below, but here is a short description.
It does the following:
the function check_file takes 2 arguments: a string path and a callback function.
gets the contents of given path
gets the file extension (ext) of the given path
calls the srcFrom [ext] object method that returns an array of relative paths that was referenced in the string context by src, href, etc.
makes a synchronous call to each of these paths in the paths array
halts on error, and returns the HTTP error message and the path that had a problem, so you can use it for other issues as well, like 403 (forbidden), etc.
For convenience, it resolves to relative path names and does not care about which protocol is used (http or https, either is fine).
It also cleans up the DOM after parsing the CSS.
var srcFrom = // object
{
html:function(str)
{
var prs = new DOMParser();
var obj = prs.parseFromString(str, 'text/html');
var rsl = [], nds;
['data', 'href', 'src'].forEach(function(atr)
{
nds = [].slice.call(obj.querySelectorAll('['+atr+']'));
nds.forEach(function(nde)
{ rsl[rsl.length] = nde.getAttribute(atr); });
});
return rsl;
},
css:function(str)
{
var css = document.createElement('style');
var rsl = [], nds, tmp;
css.id = 'cssTest';
css.innerHTML = str;
document.head.appendChild(css);
css = [].slice.call(document.styleSheets);
for (var idx in css)
{
if (css[idx].ownerNode.id == 'cssTest')
{
[].slice.call(css[idx].cssRules).forEach(function(ssn)
{
['src', 'backgroundImage'].forEach(function(pty)
{
if (ssn.style[pty].length > 0)
{
tmp = ssn.style[pty].slice(4, -1);
tmp = tmp.split(window.location.pathname).join('');
tmp = tmp.split(window.location.origin).join('');
tmp = ((tmp[0] == '/') ? tmp.substr(1) : tmp);
rsl[rsl.length] = tmp;
}
});
});
break;
}
}
css = document.getElementById('cssTest');
css.parentNode.removeChild(css);
return rsl;
}
};
And here is the function that gets the file contents and calls the above object method according to the file extension:
function check_file(url, cbf)
{
var xhr = new XMLHttpRequest();
var uri = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function()
{
var ext = url.split('.').pop();
var lst = srcFrom[ext](this.response);
var rsl = [null, null], nds;
var Break = {};
try
{
lst.forEach(function(tgt)
{
uri.open('GET', tgt, false);
uri.send(null);
if (uri.statusText != 'OK')
{
rsl = [uri.statusText, tgt];
throw Break;
}
});
}
catch(e){}
cbf(rsl[0], rsl[1]);
};
xhr.send(null);
}
To use it, simply call it like this:
var uri = 'htm/stuff.html'; // html example
check_file(uri, function(err, pth)
{
if (err)
{ document.write('Aw Snap! "'+pth+'" is missing !'); }
});
Please feel free to comment and edit as you wish, i did this is a hurry, so it may not be so pretty :)

#alexander-omara gave the solution.
You can even add it in many files but the window handler can/should be added once.
I use the singleton pattern to achieve this:
some_global_object = {
error: (function(){
var activate = false;
return function(enable){
if(!activate){
activate = true;
window.addEventListener('error', function(e){
// maybe extra code here...
// if(e.target.custom_property)
// ...
}, true);
}
return activate;
};
}());
Now, from any context call it as many times you want as the handler is attached only once:
some_global_object.error();

create callback API

New Restful API's like Google, OpenStreetview use a simple call back mechanism.
Basically you call the API, adding a parameter &callback=my function.
When executing a call to this API, as a result my function is called passing a JSON dataset.
I am trying to create the same mechanisme for a API I am building for my personal use.
As far as I understood my API needs to return a javascript, that calls the function that is passed in a script.
For a test I created this:
function apiCall(URL,values, keyPair,cBackPair) {
// URL specifics URL to call
// keyPair: <keyname>=<key>; leave black if unneeded
// cBacPair: <callBackParametername>=<functionname>
// called is: URL?values&keypair&cBackPair
var request = (keyPair)?'&'+keyPair:'';
request = URL + '?'+ encodeURI(values) + request + '&' + cBackPair;
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
function callAPI() {
apiCall('http://xllent.nl/map/ajax/answer.php','q=one','','s=doit');
}
function doit(result) {
alert(result);
}
To test I call callAPI onload.
The script answer.php is very basic:
<?$s = $_GET['s'];
?>
<script type="text/javascript">
doit('jeroen');
</script>
Later the script would use $s to call the right script, and of course supply user data.
For now I am just trying to get the script doit('jeroen'); to be run. But nothing happens.
Typing javascript:doit('jeroen'); in the browser window gives the result I would expect.
Any suggestions?

Don't surround your javascript with <script> tags. You are not generating a HTML file with a javascript body.. You should think of this as if you're generating a javascript file on fly.
Javascript files also don't start and end with <script>

Using JavaScript to perform a GET request without AJAX

Out of curiosity, I'm wondering about the best (easiest, fastest, shortest, etc; make your pick) way to perform a GET request in JavaScript without using AJAX or any external libraries.
It must work cross-browser and it's not allowed to distort the hosting web page visually or affect it's functionality in any way.
I don't care about headers in the request, just the url-part. I also don't care about the result of the request. I just want the server to do something as a side effect when it receives this request, so firing it is all that matters. If your solution requires the servers to return something in particular, that's ok as well.
I'll post my own suggestion as a possible answer, but I would love it if someone could find a better way!

Have you tried using an Image object? Something like:
var req = new Image();
req.onload = function() {
// Probably not required if you're only interested in
// making the request and don't need a callback function
}
req.src = 'http://example.com/foo/bar';

function GET(url) {
var head = document.getElementsByTagName('head')[0];
var n = document.createElement('script');
n.src = url;
n.type = 'text/javascript';
n.onload = function() { // this is not really mandatory, but removes the tag when finished.
head.removeChild(n);
};
head.appendChild(n);
}

I would go with Pekka idea and use hidden iframe, the advantage is that no further parsing will be done: for image, the browser will try to parse the result as image, for dynamically creating script tag the browser will try to parse the results as JavaScript code.. iframe is "hit and run", the browser doesn't care what's in there.
Changing your own solution a bit:
function GET(url) {
var oFrame = document.getElementById("MyAjaxFrame");
if (!oFrame) {
oFrame = document.createElement("iframe");
oFrame.style.display = "none";
oFrame.id = "MyAjaxFrame";
document.body.appendChild(oFrame);
}
oFrame.src = url;
}

Google API Authentication

Using the Google Javascript API I am trying to authenticate myself (locally) to create a new event in my calendar. However, I get an error (see below) stating that my "next" parameter is bad or missing when I execute the log-in portion of the script. I am following the data api interactive samples for "Create a single event".
Update 1: From the address bar I see "next" set the following way:
next=file:///C:/calext/sending_data.html
Does Google not like local files? Workaround?
Update 2: I tried running the file on my web host. The page ran (threw a few errors) but the event ended up on my calendar. So the bug lies somewhere with not liking local files. Thoughts?
Error Message:
The page you have requested cannot be
displayed. Another site was requesting
access to your Google Account, but
sent a malformed request. Please
contact the site that you were trying
to use when you received this message
to inform them of the error. A
detailed error message follows:
The "next" parameter was bad or
missing.
My page's code:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body>
<img src="128.png">
<script type="text/javascript">
var myService;
var feedUrl = "https://www.google.com/calendar/feeds/default/private/full";
google.load("gdata", "1");
google.setOnLoadCallback(getMyFeed); // starts process
// Create a single event example
function doExample()
{
var calendarService = myService;
// The default "private/full" feed is used to insert event to the
// primary calendar of the authenticated user
var feedUri = 'http://www.google.com/calendar/feeds/default/private/full';
// Create an instance of CalendarEventEntry representing the new event
var entry = new google.gdata.calendar.CalendarEventEntry();
// Set the title of the event
entry.setTitle(google.gdata.Text.create('JS-Client: insert event'));
// Create a When object that will be attached to the event
var when = new google.gdata.When();
// Set the start and end time of the When object
var startTime = google.gdata.DateTime.fromIso8601("2010-10-24T09:00:00.000-05:00");
var endTime = google.gdata.DateTime.fromIso8601("2010-10-24T10:00:00.000-05:00");
when.setStartTime(startTime);
when.setEndTime(endTime);
// Add the When object to the event
entry.addTime(when);
// Submit the request using the calendar service object
calendarService.insertEntry(feedUri, entry, handleMyFeed, handleError, google.gdata.calendar.CalendarEventEntry);
}
function handleMyFeed(myResultsFeedRoot)
{
alert("This feed's title is: " + myResultsFeedRoot.feed.getTitle().getText());
}
function handleError(e)
{
alert("There was an error!");
alert(e.cause ? e.cause.statusText : e.message);
}
function getMyFeed()
{
// Set up my service
myService = new google.gdata.calendar.CalendarService('GoogleInc-jsguide-1.0');
// Log me in
var scope = "https://www.google.com/calendar/feeds/";
var token = google.accounts.user.login(scope);
// Create a single event example
doExample();
// Get my feed
myService.getEventsFeed(feedUrl, handleMyFeed, handleError);
}
</script>
</body>
</html>

I assume your opening a local file which requires a local file. By default, file:// URIs cannot read other file:// URIs. Try adding this command line parameter, it is specifically made to help developers test:
chrome --allow-file-access-from-files