I'm trying to append window.location.path name to source and currently it is not returning the value. Am i appending it correctly?
<script src="abc.com/gethistory?product=aj1&m=abn&lang='"+ window.location.pathname.substring(1,2)" ></script>
JavaScript isn't executed in HTML tags. You need to write a script that creates the tag with the computed URL.
var script = document.createElement("script");
script.src = "abc.com/gethistory?product=aj1&m=abn&lang="+ window.location.pathname.substring(1,2)";
document.head.appendChild(script);
Your script is not inside any other javascript code, window is a javascript object and only accessible inside a javascript script. If you want to achieve the desired outcome you can write the following script.
const script = document.createElement("script");
script.src = `abc.com/gethistory?product=aj1&m=abn&lang="${window.location.pathname.substring(1,2)}"`;
document.head.appendChild(script);
Related
I want to 1) load an external js file programmatically via js code, 2) replace some literal values in it and only that 3) execute it normally.
Namely, instead of this single step
<script async src="https://external_domain1.com/script1.js"></script>
I want something to do 3 steps:
<script>
// incomplete solution
var script = document.createElement('script');
script.src = "https://external_domain1.com/script1.js";
script.async = true;
document.head.appendChild(script); // must not be executed at this point yet
//?????
</script>
How to do that?
Download the script using fetch/XMLHttpRequest, then modify the text in the response, then add it as an inlilne script
fetch("https://external_domain1.com/script1.js")
.then(response => response.text())
.then(text => {
const s = text.replace('foo', 'bar');
script.textContent = s;
const script = document.createElement('script');
document.body.appendChild(script);
});
No need for async flag here, and just append it to the document.body
Alternative
Have some resource on your server which, when accessed does the following
reads https://external_domain1.com/script1.js
modifies the content
sends the modified content as the response
lets assume this script is written in PHP, lives in the folder /path-to-script and is called magicScript.php - then in HTML you'd just have
<script async src="/path-to-script/magicScript.php">
<html>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=xxxxx">
</script>
<html>
replace value xxx by var get from config
<script async src="https://www.googletagmanager.com/gtag/js?id=Var">
I want to replace the value of the id in src of script with a variable that I get from conf file
any help?
As HTML is "read" by the web browser, you won't be able to simply add a variable to a <script> tag. You can accomplish this through pure Javascript by loading in the file dynamically as stated here: Dynamically load JS inside JS
Where id_number is the number you are attempting to add:
var url_string = 'https://www.googletagmanager.com/gtag/js?id=' + id_number
var script = document.createElement('script');
script.onload = function () {
//do stuff with the script
};
script.src = url_string;
document.head.appendChild(script);
I want to execute javascript file which is on another server and get the output of that script from my javascript code. Is there any way of doing this?
Thanks in advance.
The file which is on another server contains document.write method. Can I get that output in my javascript variable?
Only by overriding document.write and then loading the new script.
function capture(data) {
// do something with data
}
document.write = capture;
var script = document.createElement("script");
script.src = "http://example.com/example.js";
document.body.appendChild(script);
$.getScript is what you're looking for.
Basically, I want to do this:
<script src=" path + '/jquery.js'"></script>
(Obviously that won't work.)
I have a standalone page loading external scripts with <script>, but the URL needs to be prefixed with the variable path (because the page is run on different servers in different environments). I easily get path from the URL which always ends with "?path=X" where X is the actual path.
If I had jQuery, I know I could use getScript() to dynamically load external .js files, but jQuery is one of the files I need to load! I don't need anything too complicated here, no need to worry about encoding or file-types, it's a fairly simple situation except for the changing servers.
You need to use plain javascript if jquery not loaded. Something like that:
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", path + '/jquery.js');
document.getElementsByTagName("head")[0].appendChild(fileref);
fileref.onload = function(){alert('loaded')};
You can load JS files by inserting them into the head with javascript, and at the same you can use your variable for the path when setting the source attribute:
<script type="text/javascript">
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = path + '/jquery.js';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
</script>
I'm including a funky script (from the german social network VZ) in my page which requires me to insert a script block containing a custom "language":
<script type="vz/login">
client_id : c47a1d7f134b88c9f12448e08f2ef7289e9fc8
redirect_uri : http://game.example.com/vzcallback.html
callback : logResponse
fields : emails,gender,birthday
</script>
Can I insert such a block into my page at runtime using Javascript (no PHP or other server-side code)? I need this to set client_id dynamically.
Additionally I also need to insert something like:
<script src="https://secure.studivz.net/Js/id/v4/library.js"
data-authority="platform-redirect.vz-modules.net/r"
data-authorityssl="platform-redirect.vz-modules.net/r" type="text/javascript">
</script>
But I don't think adding those data-attributes will be a hard challenge.
Yes you can,
var el = document.createElement("script");
el.setAttribute("type","vz/login");
el.innerHTML = "client_id : "+new_client_id
+"\nredirect_uri : http://game.example.com/vzcallback.html"
+"\ncallback : logResponse"
+"\nfields : emails,gender,birthday";
document.body.appendChild(el);
For the second snipped use
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'https://secure.studivz.net/Js/id/v4/library.js';
newScript.setAttribute("data-authority","platform-redirect.vz-modules.net/r");
newScript.setAttribute("data-authorityssl", "platform-redirect.vz-modules.net/r");
headID.appendChild(newScript);
You can add the vz/login script node to the dom at runtime. But you need to ensure that the vz/login node has been added before the JS that is looking for it.