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);
}
Related
I have a form on a page "page1.php", like this:
<form id = "form1" action = "page2.php">
</form>
After executing an Ajax function, I add the following script into this form with .append():
<script id='mp_script' src="https://www.mercadopago.com.br/integrations/v1/web-payment-checkout.js"
data-preference-id="9999999">
</script>
But this script does not run, how do I run it after adding it with Ajax?
Note: I cannot add this script other than with AJAX, as the "data-preference-id" attribute will change depending on what the user selects on the screen.
You can create a script tag and then listen to the onload event to execute your logic.
const script = this.document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = url; // the script url like
script.onload = () => {
// your logic after script load
};
this.document.body.appendChild(script);
This works on localhost
var f = document.createElement("form");
f.setAttribute('method', "post");
f.setAttribute('action', "the-url-to-post");
$('#div_mercadopago').append(f);
var s = document.createElement("script");
s.setAttribute('src', 'https://www.mercadopago.com.br/integrations/v1/web-payment-checkout.js');
s.setAttribute('data-preference-id', Preference-ID**);
// add all elements to the form
document.body.appendChild(s);
**The Preference-ID that I presume you are getting from a webservice/ajax
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>
Can I use Javascript to load a Javascript file in HTML based on a string in URL?
For example something like this:
<script type="text/javascript">
if (location.href.indexOf("DEUTCH") != -1)
{
include ('javascript_deutch.js)
}
else
{
include ('javascript_english.js)
}
</script>
I cannot use any other method like PHP or something.
Thanks for the help guys.
Unfortunately none of these things seem to work.
This
<script type="text/javascript">
if (location.href.indexOf("DEUTCH") != -1) {
document.head.innerHTML+='<script src="javascript_deutch.js"></script>';
}else{
document.head.innerHTML+='<script src="javascript_english.js"></script>';
}
</script>
ended up just displaying a message at the top of my page:
'; }else{ document.head.innerHTML+=''; }
And this
<script type="text/javascript">
var script = document.createElement('script');
if (location.path.indexOf("DEUTCH") > -1) {
script.src = 'javascript_deutch.js';
} else {
script.src = 'javascript_english.js';
}
document.body.appendChild(script);
</script>
did not request the files on the server at all.
Am I missing something?
You can create a <script> tag dynamically:
var script = document.createElement('script');
if (location.path.indexOf("DEUTCH") > -1) {
script.src = 'javascript_deutch.js';
} else {
script.src = 'javascript_english.js';
}
document.body.appendChild(script);
The easy way without framework:
var _script = document.createElement('script');
_script.src = 'fileName.js';
document.body.appendChild(_script);
May be will be good to isolate this into separate function like this:
function includeJsFile(fileName) {
var _script = document.createElement('script');
_script.src = fileName;
document.body.appendChild(_script);
}
But may be will be good for you to check
http://requirejs.org/
Why not. Just add them in the script tags.
<script type="text/javascript">
if (location.href.indexOf("DEUTCH") != -1) {
document.head.innerHTML+='<script src="javascript_deutch.js"></script>';
}else{
document.head.innerHTML+='<<script src="javascript_english.js"></script>';
}
</script>
Try this code, this method worked for me:
<script>
document.write('<script type="text/javascript" src="' + language-file + '.js"><\/script>')
</script>
I am using Javascript to generate additional custom javascript and then adding it to the HEAD tag. The code below works great adding a javascript file, but what if the script is in a variable just generated?
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", "myfile.js");
document.getElementsByTagName("head")[0].appendChild(scriptTag);
Thank you for your attention.
// script text
var txt = "alert('foo');";
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
// append it in a text node
scriptTag.appendChild(document.createTextNode(txt));
document.getElementsByTagName("head")[0].appendChild(scriptTag);
FWIW, you don't need a script tag for this. You can use the Function constructor instead.
var txt = "alert('foo');";
Function(txt)();
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.innerHTML = "What you want here";///....
document.getElementsByTagName("head")[0].appendChild(scriptTag);
Live DEMO
Both answers seem ok specially the one from #gdoron.
I've written a simple example in case you want to do the same thing in jquery: http://jsfiddle.net/bitoiu/EKpGg/
Snippet:
$(function(){
var script = document.createElement( 'script' );
script.type = 'text/javascript';
// script.url = 'some valid url';
$('head').append( script );
});
I'm currently trying to insert dynamically a JS block on a webpage using jQuery but it didn't work. I tried this :
var body = $('body');
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
EDIT : 16:26
I've succeed to insert the code by this way :
/* Importation de Tool.js */
var scriptImport = document.createElement('script');
scriptImport.type = 'text/javascript';
scriptImport.src= chrome.extension.getURL('js/Tool.js');
head.appendChild(scriptImport);
/* Injection du script onClick */
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = "document.addEventListener('click', function(){ dropMenu('slideUp', 0); alert('TRY ME AGAIN'); });";
And dropMenu :
function dropMenu(dropMenuPage, marginLeft)
{
var msg = "";
msg = msg.concat(dropMenuPage, "|", marginLeft);
chrome.extension.sendRequest({dropMenu : msg});
alert('After send');
}
The problem is that the sendRequest is impossible from this page... Someone have an idea ?
Thanks in advance.
You need a closing </script> at the end there...
I think its just your script stag isn't closed
var b= $('body');
var injectJs = $('<script type=text/javascript> $(document).click(function() {alert("yes");});</script>');
b.append(injectJs);
Use eval function, such as eg:
var body = $('body');
var injectJs = eval("$(document).click(function() {alert('hello')})");
body.append(injectJs);
Why not use content scripts for this? Injecting script directly to the page is only required if you need to access js variables from the page. For your dropMenu() a content script should be enough.
You cannot use Chrome API inside injected js. You would need to also inject a content script, and using custom DOM events you would be able to communicate with it from your injected script. Then this content script would be able to call Chrome API and communicate with a background page. Sounds like a pain to me. I would suggest you go this route only if there is no other ways possible.
// Importation of jQuery.js
var scriptImport = document.createElement('script');
scriptImport.type = 'text/javascript';
scriptImport.src= chrome.extension.getURL('js/jquery.js');
head.appendChild(scriptImport);
// Injection of onClick script
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML =
"document.addEventListener('click', function()" +
"{ if(document.getElementById('dropMenu')) {" +
"$('#dropMenu').slideUp(800, function() {" +
"$(this).remove();" +
"});" +
"}});";
I've finally done this, it works :)