I am trying to use a simple vanilla js script within the page to append some jQuery to the end of the body, where it will come after the jQuery lib load and thus work. I can append js to it fine as shown here..
window.onload = function(){
var script = document.createElement('script');
script.text = "alert('ok');";
document.body.appendChild(script);
};
Attemping to append jQuery:
window.onload = function(){
var script = document.createElement('script');
script.text = "$(window).load(function() {";
script.text += "alert('ok');";
script.text += "});";
document.body.appendChild(script);
};
Works fine appending vanilla, breaks with any jQuery. Why?
*the += instead of one line was one suggested fix to this, but with no luck
**Feels like this should be a duplicate and I'm finding similar issues but not specifically inserting (and triggering, which I realise may be a problem) jQuery.
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
document.body.innerHTML = "<script>alert(11);</script>"
$("body").html("<script>alert(11);</script>")
innerHTML is not executed.
jQuery html() is executed.
Why so?
Without getting into the theoretical questions of why jQuery chose to do this, the jQuery html() behaves differently than the native innerHTML. By default, jQuery will find the script tags within the HTML, and load then asynchronously. If this behavior is undesirable, you can use $.parseHTML to prevent this from happening by setting the third argument to false.
$("body").empty().append($.parseHTML("<script>alert(11);</script>", document, false));
Note that the script tags will not be added to the DOM using this method.
Conversely, if you wish to achieve the same affect as your jQuery statement in vanilla JS, you can do the following.
var script = document.createElement('script');
script.text = 'alert(11);';
document.body.innerHTML = '';
document.body.appendChild(script);
Try this...
var x = document.createElement('script');
var y = document.getElementsByTagName('script')[0];
x.text = "alert(11);"
y.parentNode.insertBefore(x, y);
Using innerHTML will stop the script from executing according to the documentation in simple words without going into details.
<script type="text/javascript">
var script = document.createElement('script');
script.appendChild(document.createTextNode("alert('11')"));
document.body.appendChild(script);
</script>
I need to add the following script tag to the DOM after a few things run on my page:
<script data-main="js/main" src="lib/Require/require.js"></script>
I know that optimally everything will be in my require file, but as of now i need to hotfix this to work in IE.
What i have that is working in FF/Chrome is:
var script = document.createElement('script');
script.setAttribute('data-main', 'js/main');
script.src = 'lib/Require/require.js';
document.getElementsByTagName('script')[0].parentNode.appendChihld(script);
However, IE doesn't like it when i try to set the attribute 'data-main' and therefore is not working.
How can i get around this and have it add the script element to the dom and have it load the script at the same time?
Thanks
this seems to work fine in IE as well:
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "lib/Require/require.js";
scriptTag.setAttribute("data-main", "js/main");
( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( scriptTag );
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/
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.