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
Related
I'm developing an angularjs app where Google login is one of it's features.
I'm using this link to implement the feature
https://blog.codecentric.de/en/2014/06/angularjs-google-sign-integration/.
Here is also the script called when the page is loaded
`
<script type="text/javascript">
(function () {
var p = document.createElement('script');
p.type = 'text/javascript';
p.async = true;
p.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(p, s);
})();
</script>
`
Is this the right way and how I can fetch data from google and show the data to the user and if he is happy to press sign up and then to be signed. I already have my app created into the google api service and tried many options but no success so far.
Thanks in advice.
Well this has a problem you would be login in directly with out being clicked so that might be a problem in future
Try something like this
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
In the view
function login()
{
var myParams = {
'clientid' : 'YOUR_CLIENT_ID.apps.googleusercontent.com', //You need to set client id
'cookiepolicy' : 'single_host_origin',
'callback' : 'loginCallback', //callback function
'approvalprompt':'force',
'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
};
gapi.auth.signIn(myParams);
}
Convert this codes to Angular .
Please see this question for details
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 currently have the following:
<script src="http://www.google.com/jsapi?key=..." type="text/javascript"></script>
<script>
//<![CDATA[
google.load('jquery', '1.6');
//]]>
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '...']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Seems like two very different ways to load js. Is there some way I can combine these so the load is most efficient?
For this call you need to load google jsapi first.
google.load('jquery', '1.6');
If you just want the jquery loaded asyncronously parallel to other script file calls, use the following :
var jq = document.createElement(“script”);
jq.src = “/path/to/jquery.js”; jq.type=”text/javascript”; jq.async=true;
document.getElementsByTagName(“head”)[0].appendChild(jq);