How to show code external JavaScript in alert or anywhere because is value of variable s_code
(function(){
var newscript = document.createElement('script');
newscript.type = 'text/javascript';
newscript.async = true;
newscript.src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js?'+Math.random();
s_code = newscript.toString();
alert(s_code);
})();
Only using plain JavaScript without external library.
Using jQuery's $.get you can do this way:
$(function () {
$.get("https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", function (res) {
alert(res);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Fiddle: https://jsfiddle.net/aahedi/y0v4kz3u/1/
Related
I want to load a constants file as per the language the user has selected. For that I want to load the scripts dynamically.
<html>
<body>
<script type="text/javascript">
var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
jsElement.src = "../constants.en.js";
document.body.appendChild(jsElement);
</script>
<script type="text/javascript" src="../js/RandomScript.js"></script>
</body>
Whole code is in HTML.
When I tried the code above, RandomScript.js is loaded before the constant file.
How can I maintain sequence of loading files.
I am not using jQuery or something, so is there any way to do interpolation of src of script?
You can use onload event listener to load .js files sequentially.
First create an array of URLs of scripts. Then loop through it recursively. onload event listener ensures that the scripts are loaded sequentially.
var scriptURLs = [
"../constants.en.js",
"../js/RandomScript.js"
];
function loadScript(index){
if(index >= scriptURLs.length){
return false;
}
var el = document.createElement('script');
el.onload = function(){
console.log("Script loaded: ", scriptURLs[index]);
loadScript(index+1);
}
el.src = scriptURLs[index];
document.body.appendChild(el);
// OR
// document.head.appendChild(el);
}
loadScript(0); // Load the first script manually.
Hope this helps.
var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
document.body.appendChild(jsElement);
jsElement.onload = () => {
callyournewScript();
}
jsElement.src = "../constants.en.js";
Load the ../js/RandomScript.js after loading the ../constants.en.js like following
<body>
<script type="text/javascript">
var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
jsElement.src = "../constants.en.js";
document.body.appendChild(jsElement);
var script = document.createElement("script");
script.src = "../js/RandomScript.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
<!-- <script type="text/javascript" src="../js/RandomScript.js"></script> -->
</body>
I have got the following scenario and problem to solve. Any help will be appreciated.
Scenario
I have an angular application which calls a service(web api) and gets the contents back. The content is added to the html div. The content is as follow:
<script type="text/javascript" src="https://xxxx.com/ws/js/xxxxloader.js" id="theLoader"></script>
<script type="text/javascript">
// The code here look at the if the above script has been loaded properly by //checking the state of above script tag
</script>
I am adding the returned content to the HTML of the component in NgOnInit() as follow.
ngOnInit(){
this.apiService.getContent().subscribe(
d => {
this.responseString = d.toString();
var frag = document.createRange().createContextualFragment(this.responseString);
document.getElementById("theContainer").appendChild(frag);
}
);
}
However, it is failing because the first script tag (#theLoader) has never been loaded properly. I think it is because I am injecting the script tag after Dom has finished loading.
If you can see the better way of injecting the script, can you enlighten me.
Thanks in advance.
You can dynamically inject the JS URL by creating dynamic script tag
ngOnInit(){
function loadScripts(url: string){
var el = document.createElement('script');
el.onload = function(script){
console.log(script + ' loaded!');
// you can call the JS Function
};
el.src = url;
document.getElementsByTagName('body')[0].append(el);
}
</script>
ngAfterViewInit () {
this.loadScript('path to your js');
}
loadScript(url) {
console.log('preparing to load...')
let node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(node);
}
Try this one :
ngOnInit(){
this.addScripts("https://xxxx.com/ws/js/xxxxloader.js", 'text/javascript');
this.addScripts("https://xxxx.com/js/mail.js", 'text/javascript');
}
addScripts(src, type): void{
var script = document.createElement('script');
script.src = src;
script.type = type;
document.querySelector('body').appendChild(script);
}
I am trying to create a new window dynamically using window.open() and $(document).ready( function() { ... }); I got it working on Chrome and Internet Explorer but firefox is not trigering the jQuery code. See code below:
index.html code:
<html>
<head>
</head>
<body>
Link
<script type="text/javascript">
function showDetails(name, timeStamp)
{
var w = window.open("", timeStamp);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "var eventArray = [];";
w.document.body.appendChild(s);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
w.document.body.appendChild(s);
var s = w.document.createElement("script");
s.type = "text/javascript";
s.src = "test.js";
w.document.body.appendChild(s);
w.document.title = name;
w.document.close();
return false;
}
</script>
</body>
test.js code:
alert("executing js file");
$(document).ready( function()
{
alert("document ready fired");
});
The first alert "executing js file" is executing but not the second one "document ready fired".
Any idea how can I make this work on firefox?
NOTE:
w.document.close(); and return false; is added following this post but still not working...
jquery is loading properly
thank you very much in advance
My inner sense says:
s.src = "jquery1.10.2.js";
should be:
s.src = "jquery-1.10.2.js";
Or any valid url that points to jquery.
Why you always use same variable names? Could you please try it like:
<script type="text/javascript">
function showDetails(name, timeStamp) {
var w = window.open("", timeStamp);
var s1 = w.document.createElement("script");
s1.type = "text/javascript";
s1.src = "var eventArray = [];";
w.document.body.appendChild(s1);
var s2 = w.document.createElement("script");
s2.type = "text/javascript";
s2.src = "jquery1.10.2.js";
w.document.body.appendChild(s2);
var s3 = w.document.createElement("script");
s3.type = "text/javascript";
s3.src = "test.js";
w.document.body.appendChild(s3);
w.document.title = name;
w.document.close();
return false;
}
</script>
I need to append a new version of jquery into head section as below.
<head>
<script type="text/javascript" async="" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">var $jq = jQuery.noConflict(true);</script>
<script>
$jq(document).ready(function() {
// works well
});
</script>
</head>
It works fine when I put it directly. But my case is, I need to append it dynamically, reslove noconflict and the implementation using external javascript file (my.js). (As below)
my.js file should be consisted with the all implementation.
// insert jquery file
var jqueryfile = document.createElement('script');
jqueryfile.type = 'text/javascript';
jqueryfile.async = true;
jqueryfile.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jqueryfile, s);
How to do my implementation with jQuery.noConflict() and $jq(document).ready(function() {}).
Thank you!
You can try this to insert script in HEAD section
head1=document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
var s1 = document.createElement("script");
s1.type = "text/javascript";
s1.innerHTML="var $jq = jQuery.noConflict(true);
$jq(document).ready(function() {
// works well
});
";
head1.appendChild(s);
head1.appendChild(s1);
you only need to include a regular js file in the regular fashion like so and alias jQuery as a parameter, freeing up the dollar sign:
<script type="text/javascript">js/scripts.js</script>
and then add this to your scripts.js file:
;(function ( $ ) {
// all code in this anonymous function will not conflict with any other library
// and it will never get in to the global namespace which is good
$(document).ready(function() {
// works well
});
})( jQuery );
now you can just use the "$" for jQuery freely
I have the below code that will dynamically create the script tag.
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
var variable1 = getUrlVars()["parameter1"];
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin#domain.net');
document.body.appendChild(myScript);
</script>
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='https://www.google.com?'">
</body>
</html>
But somehow the above code doesn't work in IE but it works fine in Chrome. I am not sure what is the reason? Can anybody help me with that?
This whole things doesn't work in IE.
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin#domain.net');
document.body.appendChild(myScript);
You can dynamically add a script element using the following function.
var create_script = function(data) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = data;
//if you have to debug dynamically loaded script in chrome use the following - sourceURL has changed in the recent versions of chrome devetools.
//script.text = data + "\n\n //# sourceURL=" + ns + ".js\n";
//append the script element to body or head or where it seems fit.
document.body.appendChild(script);
}
the "data" parameter is the actual javascript code/URL that will form the part of the script tag. You are missing this in your code.
EDIT:
for non-standard attributes you might want to change the doctype according to http://www.w3schools.com/DTD/dtd_attributes.asp