How can I dynamically update 'src' in <script src=> in Squarespace - javascript

I an trying to grab url parameters onto a Zoho form in Squarespace for Google tracking purposes. I made a custom function to get the parameter and add it to a url. The alerts at the end are just to show that it is getting set correctly. But I am unable to add the form with the variable 'site'.
<script type="text/javascript">
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var campaign = getUrlVars()["campaign"];
var site = "https://forms.zohopublic.com/....wj7Q?campaign="+campaign;
var scriptElement = document.createElement('script');
scriptElement.type = "text/javascript";
scriptElement.src = site;
scriptElement.id = "ZFScript";
document.head.appendChild(scriptElement);
alert(decodeURI(campaign));
alert(site);
alert(scriptElement.src);
alert(scriptElement.type);
alert(scriptElement.id);
</script>
So at the end I just need to run
<script type="text/javascript" src=site id="ZFScript"></script>
But I can not get it to write a new script with src equaling the site variable.

If you are using only javascript, you almost got it as #Julesezaar comment, I complement it with something like this:
document.getElementById('ZFScript').setAttribute('src',site);
And you are done.

Related

Use local storage value in script src

How can I have my Local Storage value inside the SRC value of a script tag?
I have this:
<script id="gmap" async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=">
And I get the local value:
var gkey = localStorage.getItem('LSGMD-GoogleMapsAPIKey');
The local value is set and when showing it via an alert it shows up correctly. But now how can I use this local value in the script. It should become:
<script id="gmap" async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=LOCALVALUE">
EDIT ONE: This is what I tried but while it does change the SRC it won't show the map.
<script>
(function ($) {
$(document).ready(function() {
var gkey = localStorage.getItem('LSGMD-GoogleMapsAPIKey');
var glink = "https://maps.googleapis.com/maps/api/js?callback=initMap&key=";
var gscript = glink + gkey;
$("#gmap").attr("src",gscript);
});
})(jQuery);
</script>
How could I add a var to this part &key=VARHERE">?
I think one solution would be to create that script element dynamically
<script>
var script = document.createElement('script');
script.onload = function () {
var ipServer = location.host;
};
var gkey = localStorage.getItem('LSGMD-GoogleMapsAPIKey');
script.setAttribute( 'src', 'https://maps.googleapis.com/maps/api/js?callback=initMap&key=' + gkey);
document.head.appendChild(script);
</script>
You can retrieve that value from local storage and dynamically append a script tag to the document.
<script>
var gkey = localStorage.getItem('LSGMD-GoogleMapsAPIKey');
var scriptTag = document.createElement('script');
scriptTag.src = 'https://......' + '?queryparams....&key=' + gkey;
document.head.appendChild(scriptTag);
</script>

How can I populate an embedded website form with URL parameters using Javascript?

I have a Zoho form embedded on a Squarespace site and I need to populate some fields with URL parameters in Javescript. I'm using the following code to get the parameters:
<script> function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
and then to set the parameters to variables:
var campaign1 = getUrlVars()["campaign"];
alert(campaign1);
So that gets the parameter named 'campaign' in the url and assigns it to 'campaign1'. The alert is just to show that it is working, and it is. Then I want to run this:
<script type="text/javascript" src="https://forms.zohopublic.com/....j7Q?campaign="+campaign1 id="ZFScript"> alert(campaign1); </script>
But no matter what I do I can't get that part to reference the variable in the 'src=' section, but I can reference it in the 'alert(campaign1);' immediately after.
I also tried this, which was meant to save the whole URL to a variable named 'site' and just run 'src=site', but that didn't work either.
<script> function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var campaign1 = getUrlVars()["campaign"];
var site = "https://forms.zohopublic.com....j7Q?campaign="+campaign1
</script>
<script type="text/javascript"
src=site id="ZFScript"> alert(site);</script>
Your issue is that you are trying to write some js code where it is not parsed/rendered/executed.
The js code will be executed inside <script> tags or onEvent attributes. For instance onclick or onload.
So what you want to do is execute some js code inside a script tag that will generate a script tag with the dynamic src attribute you are trying to achieve. This is a way of doing it:
<script type="text/javascript">
// [...]
var campaign1 = getUrlVars()["campaign"];
var site = "https://forms.zohopublic.com....j7Q?campaign="+campaign1;
// create a script node
var scriptElement = document.createElement('script');
// set its src attribute
scriptElement.setAttribute('src', site);
// add you new script node to your document
document.body.appendChild(scriptElement);
</script>

Placing Amazon Banner | Angular V4

I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it.
<md-card class="full-width full-height border-box ">
<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>
</md-card>
I also tried to to bind it using property binding
<span [innerHTML]="advertisement()"></span>
advertisement(){
return `<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>`;
}
I also tried to dynamically add the div inside my card,it shows inside the div but the banner doesn't appear.Below is the code showing how I did that.
ngAfterViewInit() {
let x: HTMLElement = document.getElementById('adv');
let s: HTMLScriptElement = document.createElement('script');
s.type = 'text/javascript';
// s.language = 'javascript';
let code = `var aax_size = '728x90';
var aax_pubname = 'XXXXXXX';
var aax_src = '302';`;
let src = document.createElement('script');
src.type = 'text/javascript';
// src.language = 'javascript';
src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';
try {
s.appendChild(document.createTextNode(code));
x.appendChild(s);
x.appendChild(src);
} catch (e) {
s.text = code;
document.body.appendChild(s);
}
console.log(x);
}
After scrapping every post in SO regarding or similar to this question I did not find any solution to this.I followed almost everything in those posts but nothing was working for me.After that I came across postscribe library which does the externally loading of any third party script.
First I installed the library and imported it in my component
import * as postscribe from 'postscribe';
After that all I did was calling a function inside my ngAfterViewInit function, by targetting the div with its id which in my case was adv and passed the script as a second parameter to this function.
ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
var aax_size='728x90';
var aax_pubname = 'XXXXXXXX';
var aax_src='302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
By doing this my banner was loaded.

Random generator within script tag

Hello I need help in assigning a random number to the src file in a script tag. I have read all the posts I could find, but not making any head way.
so here is what i am trying to do. In the code below, the file referenced by the src tag is myjsfile.1234.js.
What i want to is randomly generate the "1234" every time the page is loaded.
<script data-cfasync="false" id = "myid" src="https://www.example.com/myjsfile.1234.js" type="text/javascript"> </script>
For example I have tried this without success
<script>
var randomnos = Math.ceil(Math.random() * 1000000000);
var mysource = "https://www.example.com/myjsfile."+randomnos+".js";
</script>
<script data-cfasync="false" id = "myid" src=mysource type="text/javascript"></script>
So will appreciate any help I can get
Another way: using Jquery you can use $.getScript()
var randomnos = Math.ceil(Math.random() * 1000000000);
var mysource = "https://www.example.com/myjsfile."+randomnos+".js";
window.onload = function() {
$.getScript(mysource,function(){console.log('loaded')})
}
You need to create script element programatically and append it to html page:
var randomnos = Math.ceil(Math.random() * 1000000000);
var mysource = "https://www.example.com/myjsfile."+randomnos+".js";
window.onload = function() {
var script = document.createElement('script');
script.src = mysource;
document.head.appendChild(script);
}

Ebay store design JQuery error

I design a ebay store. For image slider i want to use JQuery. But can not do it. ebay says cookie,replace, IFRAME, META, or includes is not supported.
i also try javascript for sliding but don't work.
<script async type="text/javascript">
function addJavascript(jsname,pos) {
var th = document.getElementsByTagName(pos)[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
th.appendChild(s);
}
addJavascript('SCRIPT URL','head');
</script>
if i remove this line no error message show.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
How can i make a slider in ebay store.Need some sudgestion about this error.
Ebay support javascript but not all element of Javasccript. Here is a ebay guideline read it. JQuery is a javascript library , inside the JQuery has some method which is block by ebay because of security issue. so it is better to use pure javascript (without unsupported element).
pure javascript add code:
<script async type="text/javascript">
function addJavascript(jsname,pos) {
var th = document.getElementsByTagName(pos)[0];
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src',jsname);
th.appendChild(s);
}
addJavascript('YOUR SCRIPT URL','head');
</script>
You can use JQuery using this code:
<script async type="text/javascript">
/* jQuery Loading Script for eBay Listings - http://lastdropofink.co.uk/?p=5945*/
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";var hz = ".com";var jz = "ajax.googleapis"+hz+"/";
var resource = document.createElement("script");
resource.src = fz+gz+jz+"ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.getElementsByTagName("script")[0];
script.parentNode.insertBefore(resource, script);
</script>

Categories