I try to archive to execute a javascript from a file wish is located at assets/js/
but wen i click the button nothing happens.
I maybe do something wrong, i am new in javascript.
This is my code
<a href='linkhref.html' id='mylink'>view</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "assets/js/post.js";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
Inicial i have to try to do like this code below
<a class ="faux-button" href=<?php HTML :: page_js("post.js");?> target="_black">View</a>
But no success to
Related
I'm trying to pass java script code to the script tag and it is being displayed as plain text. How should i correctly pass the object so that the value is populated correctly
var script = $('<script>', {
type: 'text/javascript',
src: 'mcbz.com/models?type=c43&geo=true&languageselected='+ window.location.pathname.substring(1,6)
});
script[0].setAttribute("async", "");
$('script:first').before(script);
Expected result
<script async src="mcbz.com/models?type=c43&geo=true&languageselected=en" ></script>
You can try this out.
const script = document.createElement("script");
script.type = "text/javascript";
script.src = `mcbz.com/models?type=c43&geo=true&languageselected=${ window.location.pathname.substring(1,6)}`;
script.setAttribute("async", "");
$("head").append(script);
I also create a javascript file dynamically that uses those variables:
function callbackF(data){
console.log(data.script);
document.getElementsByTagName('head')[0].innerHTML=data.script;
var script = document.createElement("script");
script.setAttribute("src", "http://widget.example.com/sprk.1.0.2.js");
script.setAttribute("type", "text/javascript");
script.setAttribute("id", "grazit_script");
document.getElementsByTagName('head')[0].appendChild(script);
}
This is what i get in my head:
This is what is printed to the console log:
<script type='text/javascript'>var dbnwid=16476; var dbnpid=23369; var dbnwebid=19720; var dbnlayout=21; var dbncolor='#000000'; var dbntitlefontsize='14'; var dbnbgcolortype=1; var dbnheader='You might enjoy reading:'; var dbnremindercolor=2; var dbn_protocol = (('https:' == document.location.protocol) ? 'https://' : 'http://'); </script>
and then the script:
<script src="http://widget.example.com/sprk.1.0.2.js" type="text/javascript" id="grazit_script"></script>
The second script should get the variables that are in the second script..but it doesnt..then it complains about why it doesnt get those variables
UPDATE:
Both of those ways below didnt work for me:
eval(data.script);
var ss= new Function(data.script)();
Because scripts run when they are loaded. Adding a script tag using innerHTML doesn't run the code inside the tag.
<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 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')");
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