I need to include a plugin after clicking on a button, on document ready the next code below don't work.
$(document).ready(function()
{
$("#ativar").click(function()
{
var script = document.createElement('script');
script.src = '//api.handtalk.me/plugin/latest/handtalk.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
});
});
<script src="//api.handtalk.me/plugin/latest/handtalk.min.js"></script>
<script>
var ht = new HT({
token: "a34asfdas43d4f5" //example of token
});
</script>
I tried to implement this javascript above, but this don't run the script after button click. How can i approach this?
Please Try this code:
$(document).ready(function(){
$("#ativar").click(function() {
var script = document.createElement('script');
script.id = 'handtalk-id';
script.src = '//api.handtalk.me/plugin/latest/handtalk.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
$(document).find('#handtalk-id').on('load', function() {
var ht = new HT({
token: "a34asfdas43d4f5" //example of token
});
});
});
});
You are executing code before the script has been downloading.
Try this
<script src="//api.handtalk.me/plugin/latest/handtalk.min.js"></script>
<script>
var isScriptLoaded = setIterval(function(){
if(window.HT){
clearInterval(isScriptLoaded);
var ht = new HT({
token: "a34asfdas43d4f5" //example of token
});
}
},1000);
</script>
Related
So I want to make jQuery load inside my script. the user doesn't have to add the <script> to the head, but the script adds automatically. I tried using:
(function() {;
var script = document.createElement("SCRIPT");
script.src = '/src/jquery-embed.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
} else {
window.setTimeout(function() {
checkReady(callback);
}, 20);
}
};
checkReady(function($) {
//code here
fucntion callbutton {
console.log("i return as not defined when called by a button")
}
when I add it, it works fine but all my functions break. How can I go about this without screwing up more?
edit: Link to the file im working on here
Per discussion, to achieve your goal you must ask your clients to delay their script execution until you've loaded your libraries (jQuery in this case).
Shown below is all that is necessary to accomplish the loading:
var script = document.createElement('SCRIPT');
document.getElementsByTagName('head')[0].appendChild(script);
script.src = 'https://code.jquery.com/jquery-3.5.1.min.js';
script.onload = () => {
document.dispatchEvent(new CustomEvent('doYourThing'));
};
Then, your users would use this code:
document.addEventListener('doYourThing', ()=>{
// End user code that relies on jQuery goes here
});
Here is a plunkr that demonstrates the principle.
You forgot document.body.appendChild() and you also forgot to add the parentheses after callbutton
change it to this:
(function() {
var script = document.createElement("SCRIPT");
document.body.appendChild(script);
script.src = '/src/jquery-embed.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
} else {
window.setTimeout(function() {
checkReady(callback);
}, 20);
}
};
checkReady(function($) {
//code here
function callbutton(){
console.log("i return as not defined when called by a button")
}
}
})
I am trying to include jquery into section, if condition is true. For some reasons script doesnt work for me, not sure what is wrong
function loadScript() {
var currentLocation = String(window.location);
var c = currentLocation.includes('test')
if(c===true){
//document.write('<scr'+'ipt type="text/javascript" src="assets/jquery.js"></scr'+'ipt>');
console.log(c);
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "jquery.js";
//head.appendChild(script);
document.getElementsByTagName('head')[0].appendChild(script);
alert("asdsad");
}
else{
console.log('error');
}
}
loadScript();
Any help is appreciated
function loadJQueryIfMatch(keyword) {
if (window.location.href.includes(keyword)) {
var script_tag = document.createElement('script');
script_tag.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');
document.head.appendChild(script_tag);
}
}
loadJQueryIfMatch("test");
Your code is fine currentLocation.includes('test') is a case sensitive only.
load script in codepen
Im trying to write a script that will append the jquery cdn script
to the body of the document.
function addJquery() {
url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
addJquery();
What am i doing wrong here
You can't add scripts to the body and have them execute. Late-loaded scripts must be loaded through the head element:
(function addJQuery() {
var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.url = url;
script.onload = function() { addJQuery(); }
document.head.appendChild(script);
}());
However, this loads jQuery regardless of whether it's already loaded, so that's no good. Here's what you generally want instead:
(function loadMyCode() {
// do we have jquery? if not, load it.
if (typeof jQuery === "undefined") {
var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.url = url;
script.onload = function() {
// this will run after jquery gets loaded
loadMyCode();
}
document.head.appendChild(script);
return;
}
// if we get here, we know we have jquery
//
// rest of the code goes here.
}());
This is another way
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
li.async=true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
This script (for Greasemonkey) doesn't work intendedly.
I want to insert an script, and after the script loaded, replace text "Download" to Japanese word (I will use "TEST" instead.).
(function() {
if ((document.URL.match("www.youtube.com/watch?"))||(document.URL.match("c.youtube.com/videoplayback?"))) {
var head = document.getElementsByTagName('head')[0]; //Working
var script = document.createElement('script'); //Working
script.type = 'text/javascript'; //Working
script.src = 'http://userscripts.org/scripts/source/25105.user.js'; //Working
script.onload = 'document.getElementsByClassName("yt-uix-button-content")[0].innerHTML.replace("Download","TEST")'; //Not working.
head.appendChild(script); //Working
};})();
What is the problem?
You have to make sure that the elements are already loaded.
Which means, after body content is loaded you can query elements in the body.
This leads to the following solution.
on the BODY tag you have to add the following
<body onload="myOnloadFunc()">
then you have to create the myOnloadFunc as follows:
<script type="text/javascript>
function myOnloadFunc () {
// in here you should place the original code you have created.
if ((document.URL.match("www.youtube.com/watch?"))|| (document.URL.match("c.youtube.com/videoplayback?"))) {
var head = document.getElementsByTagName('head')[0]; //Working
var script = document.createElement('script'); //Working
script.type = 'text/javascript'; //Working
script.src = 'http://userscripts.org/scripts/source/25105.user.js'; //Working
script.onload = 'document.getElementsByClassName("yt-uix-button-content")[0].innerHTML.replace("Download","TEST")'; //Not working.
head.appendChild(script); //Working
}
</script>
Hi i'm trying to get a listener for the foursquare save button by using the fsquare.widget.
But the documentation on the site is very short so I can't figure it out. Here's my code any idea's?
<!-- Place this anchor tag where you want the button to go -->
<a data-on-load="javascript:test();" href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-variant="wide">Save to foursquare</a>
<!-- Place this script somewhere after the anchor tag above. If you have multiple buttons, only include the script once. -->
<script type='text/javascript'>
(function() {
window.___fourSq = {
"explicit": false,
"onReady": function () {
var widget = new fourSq.widget.SaveTo();
fourSq.widget.Events.bind("follow", function(){
//wish something like this worked
alert('test');
});
}
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
I'm just guessing, but maybe it helps:
This is your(foursquares') code:
<script type='text/javascript'>
(function() {
window.___fourSq = {
"explicit": false,
"onReady": function () {
var widget = new fourSq.widget.SaveTo();
fourSq.widget.Events.bind("follow", function(){
//wish something like this worked
alert('test');
});
}
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
Maybe it helps to add:
"onSaveTo": function () {
alert("Dunno if that works :D");
});
}
Hope it works. If someone knows the real answer i will delete this.