I am using bookmarklet to inject a element in document with a custom JS script file. I did it like this:
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.async = true;
newscript.src = 'http://www.myurl.com/my_js_script.js';
var oldscript = document.getElementsByTagName('script')[0];
oldscript.parentNode.insertBefore(newscript, oldscript);
But I can't figure out how to actually execute it. Can someone tell me how can I execute that JS file?
Note: Since this can be a Greasemonkey script as well, I am tagging this question for Greasemonkey as well.
Script tags are automatically downloaded and executed when they're added to the document. Note, however, that the script you're using may fail if the document you're injecting into doesn't already contain any <script> tags, as oldscript will be undefined.
Related
Can I use insertAdjacentHTML to execute inline javascript?
What works in the browser console:
$('body').append('<script>alert(1)</script>')
What I need to work in browser console:
document.body.insertAdjacentHTML('beforeend', '<script>alert(1)</script>');
The VanillaJS solution does not work. I would be glad about a reason
Using insertAdjacentHTML, although the script tag is added to the page, it won't be parsed or executed.
For the script to actually run you need to use createElement:
var script = document.createElement('script');
script.innerText = "console.log('Hello!');";
document.body.append(script);
var script = document.createElement('script'); // create a new script element
script.innerText = "alert('Hello!');"; // InnerText property html-encodes the content,
document.body.append(script); //append innterText to script
I am trying to write a small check that will test for jQuery, and if not present, dynamically load a copy so that a script can be run by it. It sets to no conflict in case anything else is present that also uses $, and then runs the script - a small menu.
However, upon actually testing this jQuery is loaded from the script, but fails to execute: "jQuery is not defined."
I know that jQuery has to come first before any functions that use it, but is there any way to fix this when it is dynamically installed?
(function() {
console.log("Loaded");
if(!window.jQuery) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
jQuery.noConflict();
}
})();
You're not waiting until the script has loaded.
script.onload = function(){
// do whatever
};
Is it possible to call the below script on button click?
<script type="text/javascript" src="https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&e=false"> </script>
I want to use a custom button.
It depends on the logic in script but basically yes you can. See example code below. Then you have to add click event to your button with this function.
function addscript() {
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "upload.js";
head.appendChild(script);
}
It appears you are using the Paga Service api. If you plan on submitting with your custom button, then after the script is loaded, you need to trigger $('#__paga_btn').click() which is can be found from Using the chrome dev tools to inspect element and get the id of the link. #__paga_btn, NB, the script is required to be loaded after the form element. Something like this would suffice for your case
function addscript() {
var head = document.getElementsByClassName("pagalink")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxxxxxxxxxxxxxx&e=false&layout=V";
head.appendChild(script); //Figure out a way to detect when script has loaded.
$('#__paga_btn').click(); // needs to be called after the script as loaded to submit the form.
}
the pagalink node need to be placed below the form element on the page. Since that is where you would actually put the script. The script isn't really customizable since it modifies the dom on load.
I am trying use jQuery's rich animation features on dynamically loaded content.
I can dynamically insert script into an element like so:
var element = document.createElement("div");
element.innerHTML = "some html here";
var script = document.createElement("script");
script.type = "text/javascript";
script.text = 'alert("Alert!");';
element.appendChild (script);
The problem occurs when I try to insert jquery code into the script element. This does not work and causes the script to not run at all.
var element = document.createElement("div");
element.innerHTML = "some html here";
var script = document.createElement("script");
script.type = "text/javascript";
script.text = 'alert("Alert!");\n';
script.text = script.text+'$("div").animate({height:300,opacity:0.4},"slow");\n';
element.appendChild (script);
I can successfully append javascript code to change the elements I want, but using jquery functions will simplify things.
With firebug I can see the script elements has been loaded into the dom, however when I add the jquery code to it, nothing happens, not even the alert.
I have included the jquery source file in my main document and wrapped all of my code into a window.addEventListener('load', function()) to call the functions that initiates the code above when the page finishes loading.
Is there a way to dynamically create calls to jquery functions? Am I going about this the right way? I've been stumped for a while and google hasnt solved this one for me, any help is appreciated.
This should do what you want:
$('body').append('<s' + 'cript>console.log("lol");</script>');
But why are you not wrapping your code into a function which you can then call whenever you please?
function iAnimateThings() {
$("div").animate({height:300,opacity:0.4},"slow");
}
hey nothing wrong with your code you just missed one single inverted comma on this line
script.text = script.text+'$("div").animate({height:300,opacity:0.4},"slow")';
here is your working fiddle
http://jsfiddle.net/vYut9/
Here is what i want to do.
Normally we can call javascript functions on different event, button clicks within the page provided that script is already in the page (may be in head section) or it has been loaded in the head section from external js file on load time.
Is it possible to load an external js file not when the page loads but at a later stage when (say) a button is clicked.
I know this is easily possible in JQuery:
$.getScript("url to js file", function(){});
But i want to know how can we do the same using simple javascript within the page without JQuery?
Dynamically create the script element :
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="other.js";
oHead.appendChild( oScript);
</script>
You do it like this:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'helper.js';
head.appendChild(script);
<script language="javascript">
document.write("<script src='other.js'><\/script>");
</script>
other options are here