We Keep Coding

Delay loading of script in dom by N seconds

After my site loaded, I want to delay the below javascript for 10 seconds
script:
<script type="text/javascript" id="io258wer15cfg789as69th07er64hziq" src="//mysite.domain.com/script.php?id=io258wer15cfg789as69th07er64hziq" defer></script>
i tried this but not working:
<script
setTimeout(
function(){
type="text/javascript"
id="io258wer15cfg789as69th07er64hziq"
src="//mysite.domain.com/script.php?id=io258wer15cfg789as69th07er64hziq"
defer }
,10000)>
</script>

You need to add it using createElement. So that it will inject after 10s.
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(addScript, 1000)
});
function addScript() {
script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function() {
console.log("Added Script");
};
script.src = 'https://foo.com/bar.js';
document.getElementsByTagName('head')[0].appendChild(script);
}

Try this:
document.onload = function() {
window.setTimeout(function () {
var script = document.createElement('script');
script.async = true;
script.id = 'io258wer15cfg789as69th07er64hziq';
script.src = '//mysite.domain.com/script.php?id=io258wer15cfg789as69th07er64hziq';
document.querySelector('head').appendChild(script);
}, 10000);
};

Detect end of Youtube video inside the Youtube website in Javascript

I want to detect the end of a Youtube video I am watching on the Youtube website with Javascript.
I know they have an API for that, I tried to loaded it in the page with GreaseMonkey, but it doesn't seem to work. Maybe the API is only for embeded videos on other websites?
Here is what I have so far:
if (window.location.href.indexOf("&enablejsapi=1") == -1)
{
window.location = window.location.href + "&enablejsapi=1";
}
var api = document.createElement('script');
api.type = 'text/javascript';
api.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(api);
var onFinish = document.createElement('script');
onFinish.type = 'text/javascript';
var onFinishContent = "function onPlayerStateChange(event) { console.log('test'); if (event.data == YT.PlayerState.ENDED) { console.log('end'); } }"
var textNode = document.createTextNode(onFinishContent);
onFinish.appendChild(textNode);
document.body.appendChild(onFinish);
function onPlayerStateChange(event)
{
console.log("test");
if (event.data == YT.PlayerState.ENDED)
{
console.log("end");
}
}
Like you can see, I tried to make the onPlayerStateChange function callable in two ways, one directly with Greasemonkey, and the second one by injecting a script node. Both of them doesn't work, I never see the "test" message I display in the console.
Does anyone know why I can't seem to be able to load the API?

Sebastian Simon's comment-answer in the year 2015:
document.querySelector("video").addEventListener("ended",
() => alert("Video ended!")});
I checked that this still works in the year 2022.

Jquery script is not loaded, on appendChild

I am loading my script files dynamically using this code,
<script type="text/javascript">
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.src = '../static/js/jquery.js';
document.getElementsByClassName('container')[0].appendChild(newscript);
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.src = '../static/js/report_app.js';
document.getElementsByClassName('container')[0].appendChild(newscript);
</script>
It throws error as,
Reference error: $ is not defined
in report_app.js.
I thought, jquery.js script must be loaded into the DOM when the next file, report_app.js is being parsed.
But the error shows, jquery.js is not executed. How to ensure one script file is loaded before running the next one?

It is because the script is added asynchronously, you can use the onload callback
function addScript(path, callback) {
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.src = path;
newscript.onload = callback;
document.body.appendChild(newscript);
}
addScript('http://code.jquery.com/jquery-1.11.2.js', function () {
addScript('../static/js/report_app.js');
})
Demo: Fiddle

google analytics api in chrome extension

I am manifest and js file in my chrome extension
code in js file:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'My account No.']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// MAIN CODE:
var main_div = document.getElementsByClassName('someclass');
var download_button = document.createElement('a');
download_button.setAttribute("id", "download");
download_button.style.color = "blue";
download_button.href = "#";
download_button.innerHTML = "Download";
main_div[0].appendChild(download_button);
_gaq.push(['_trackEvent', 'download', 'clicked']);
download_button.addEventListener('click', Download_Answer, false);
I want everytime the user click download button the google analytic should track this event how to do this.I am not getting my results

Here's a look at using Google’s Universal Analytics tracking to a Chrome extension.
Assuming you have given Google Analytics the correct permissions in manifest.json, add the following to setup Google Analytics:
// Standard Google Universal Analytics code
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); // Note: https protocol here
ga('create', 'UA-XXXXX-YY', 'auto');
ga('set', 'checkProtocolTask', function(){}); // Removes failing protocol check. #see: http://stackoverflow.com/a/22152353/1958200
ga('send', 'pageview', '/options.html'); // A virtual pageview on your options page
Using jQuery, I'd then assign click events similar to this:
$('#someButton').click(function () {
ga('send', 'event', 'button', 'click', 'someButtonAction');
// remaining logic for button click
});

Loading external js in IE

I want to load external javascript file but I can't use AJAX requests because of same origin policy, and I have a code:
<script type="text/javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'test.js';
head.appendChild(script);
</script>
That is ok everywhere (Firefox, Chrome, Opera, IE9, IE6) but not in IE8, IE7. How can I make it work in IE8?

How about the old document.write('<script language="javascript" src="test.js"><\/script>'). Also you do not have to append to head you can use body to.

Try reading up about JsonP :)

I'm not sure why you had problems in IE, but the following worked in Firefox 4, IE6 and IE9 (i.e. the browsers I had available):
<html>
<head>
</head>
<body>
<script type="text/javascript">
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js';
head.appendChild(script);
var interval = window.setInterval(function() {
if (typeof($) !== "undefined") {
$("<p>it worked!</p>").appendTo(document.body);
window.clearInterval(interval);
}
}, 100);
</script>
</body>
</html>