I have this self-executing function:
<script type="text/javascript">
(function() {
var sc = document.createElement('script');
sc.src = 'http://blahblah.com/test.js';
sc.type = 'text/javascript';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(sc, s);
})();
</script>
All that is contained in test.js is:
document.write('ping!');
However, it hangs -- am I doing something incorrect?
I found a way to go around the document.write but now the only question is why does this not work.
var nc = document.createElement('div');
nc.appendChild(document.createTextNode('blah'));
var scr = document.getElementsByTagName('script')[0];
scr.parentNode.insertBefore(nc, scr);
I have no idea what you're trying to accomplish, but your code is valid as long as it's hosted on http://blahblah.com/.
Your browser won't let you execute remote code to manipulate the original page. It's not that dumb.
Related
I want to inject a matomo tag manager script into the head section of a page by javascript code. However when I try the code in matomo preview mode, the code doesn't fire. What am I misssing?
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = `
var _mtm = window._mtm = window._mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src='http://url.com/matomo/js/container_xyz.js'; s.parentNode.insertBefore(g,s);
`;
document.head.appendChild(script);
The problem was on the matomo side. Code works
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.
I encountered the following script in a webpage source :
<script type="text/javascript">
WebFontConfig = {"typekit":{"id":"cmr1bul"}};
(function() {
var wf = document.createElement('script');
wf.src = 'https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
From what I see, this script inserts the content of https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js
before the first script in the page. What is the difference between the above and putting
<script type="text/javascript" src="https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js"> </script>
as the first script in the page ? What is gained by using the longer version ?
It's absolutely equivalent to the following code if both script elements are added before any other one:
<script>WebFontConfig = {"typekit":{"id":"cmr1bul"}};</script>
<script src="https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js" async></script>
...or:
<script src="https://s1.wp.com/wp-content/plugins/custom-fonts/js/webfont.js" async></script>
<script>WebFontConfig = {"typekit":{"id":"cmr1bul"}};</script>
...because the script is asynchronously included...
I have an html which has this:
<head><script src="script1.js"></script></head>
<body><script>myFunc();</script></body>
The script1.js has code that internally refers to script2.js like this :
var js = document.createElement(""script""); js.type = ""text/javascript"";
js.src = ""script2.js"";
script2.js contains this :
function myFunc() {
alert "Hi!";
}
I need to now refer to this method in script2.js directly from the html. But I am not able to achieve the same. I get an error saying myFunc is not defined. (Debugged in Mozilla)
Can someone help me out?
Try this code in first JavaScript file:
var jsfile = document.createElement("script");
jsfile.type = "text/javascript";
jsfile.src = TheFilePathOfSecondJsFile;
document.body.appendChild(jsfile);
I think you don't append it.
You have made quite a few mistakes:
Watch your double quotes, (""script"") should be ("script"), as should all the places you've used double quotes.
In myFunc(), alert needs brackets, put brackets around the string "Hi!", so should be: alert("Hi!");
You need to append your script tag to the body: document.body.appendChild(js);
So the final code should look more like:
var js = document.createElement("script");
js.src = "script2.js";
document.body.appendChild(js);
Also, when referring to your script2 functions within the html, wrap them in this code:
window.js.onload = function(){
// functions from script 2 go here
myFunc();
}
This stops the functions from running before myscript2 has loaded.
Here's the final code:
<head><script src="myscript1.js"></script></head>
<!-- myscript1.js
window.js = document.createElement("script");
js.src = "script2.js";
document.body.appendChild(js);
-->
<body>
<script>
window.js.onload = function(){
myFunc();
/*
* All your myscript2 functions can go here
*/
}
</script>
</body>
First be careful with your double quote : document.createElement(""script""); => document.createElement("script");js.type = ""text/javascript""; => js.type = "text/javascript";
...
Then at the end of script1.js write it :
var js = document.createElement(""script""); js.type = ""text/javascript"";
js.src = ""script2.js"";
document.body.appendChild( js );
I have 3 google +1 buttons in the same wordpress page. But one of them fails when is clicked (in then float lateral widget) showing an exclamation mark.
When click again the following page is opened:
+1 button is unavailable or has stopped working. I am pretty sure that none of the described possible reasons occur.
The code for both is practically the same:
// float code (malfunction)
<div id="float_plusone">
<g:plusone size="tall" href="<?php echo urlencode(get_permalink()); ?>" count="true"></g:plusone>
</div>
<script type="text/javascript">
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();
</script>
// above/below posts code (works)
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium" callback="googleplus_click"></g:plusone>
Any suggestion about is very welcome.
This is the URL the button is sending to the server to +1.
"id":"http://bestpushchairs.net/qc21/disclosure-policy/http%3A%2F%2Fbestpushchairs.net%2Fqc21%2Fdisclosure-policy%2F"
It looks like the button is taking the href value and assuming it is relative to the current path. Try not using urlencode.