I added a script to the DOM using
// in the console of facebook.com
var test = document.createElement('script');
test.src = "foo";
document.head.appendChild(test);
but the script has no access to the DOM.
Does this have to do with the same origin policy?
Here is a working solution to add JQuery:
var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();
Related
I want to insert the LinkedIn Follow Company Plugin, but only inject it, if the user has given consent.
So instead of putting in the script tags directly, I have a banner, asking for consent and if the checkbox is checked the following function runs:
function injectLinkedin() {
var linkedin_container = document.querySelector('#linkedin-follow-plugin');
var script = document.createElement("script");
script.setAttribute("src", "https://platform.linkedin.com/in.js");
script.setAttribute("type", "text/javascript");
script.setAttribute("async", "false");
script.textContent = 'lang: de_DE';
script.onload = function(){
console.log('li');
};
linkedin_container.appendChild(script);
var script2 = document.createElement("script");
script2.type = "IN/FollowCompany";
script2.setAttribute('data-id' , '1234');
script2.setAttribute('data-counter' , 'bottom');
script2.onload = function(){
console.log('li2');
};
linkedin_container.appendChild(script2);
}
But that way LinkedIn responds with an error 500 for https://platform.linkedin.com/in.js
Don't see why/how linkedin can see how the code gets loaded. Putting in the script tags directly it works fine. And, strangely, this error is not on my local machine but only on the live server.
that is so hard to explain ....
i have that url of a js code lets call it Adcode : example.com/adcode.js
i have a js file i already injected in the main HTML page with
<script src="/a.js"></script>
i want to inject the Adcode in a.js file ..
so what to put in "a.js" , i tried :
var script document.createElement('script'); script.src = 'example.com/adcode.js'; document.body.appendChild(script)
but it didn't work ( no ad's appeared )
sorry, English is not my native language ..
notice : example.com/adcode.js is changed every time we refresh the page so i can't just copy it ...
missing '='
var script **=** document.createElement('script');
other then that ReGdYN might be right
#ReGdYN it's a duplicate of
stackoverflow Question
it worked with :
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function(){
// remote script has loaded
};
script.src = 'example.com/adcode.js';
d.getElementsByTagName('body')[0].appendChild(script);
}(document));
I have the following problem:
I load a page inside a modal dialog. This page uses jQuery as dependency. Since I already use jQuery on the main page, for me, it is always available. Now we have the usecase, that also different pages (hosted on different domains) need to load that page if necessary.
So, I check if the jQuery variable exists on this page and if yes, just go on with my code.
If it does not exist, on top of the template, I dynamically create a script element 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>
And at the end of the template, I use a IIFE (to scope the jquery variable)
(function ($) {
.... code ....
})(jQuery);
However, since with this method, the script gets loaded asynchronously, sometimes I get the error: jQuery is undefined.
Now I came up by loading it synchronously, like this:
var xhrObj = new XMLHttpRequest();
// open and send a synchronous request
xhrObj.open('GET', "jquery.min.js", false);
xhrObj.send('');
// add the returned content to a newly created script tag
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementById('placeholder').appendChild(se);
This works fine, but the warning "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. to the end user's experience." made me think.
However, now I changed my code and just said
if (!window.jQuery) {
document.write('<scr' + 'ipt src="jquery.js"' + '>' + '</scr' + 'ipt>');
}
on top of my Template.
Dear javascript gurus, is this a reliable solution?
Use the onload attribute in async javascript
<script async src="siteScript.js" onload="window.MyInitialisation()"></script>
In javascript it would look like this:
<script>
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.async = "async";
script.defer = "defer";
script.onload = function() {window.MyInitialisation()}
script.src = "path/to/jQuery";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
For reasons too complicated to get into now, I have an ajax call that returns some dynamically created Javascript that I want to inject into my page. The following code works on Chrome, but not in IE:
var node = document.getElementsByTagName("head")[0] || document.body;
if (node)
{
var script = document.createElement("script");
script.type = "text/javascript";
//script.innerHTML = json.javascript;
var textnode = document.createTextNode(json.javascript);
script.appendChild(textnode);
node.appendChild(script);
}
In IE, I get "SCRIPT65535: Unexpected call to method or property access." As you can see from the commented out code, before I tried the textnode, I tried just inserting it with script.innerHTML. That also worked in Chrome, but in IE I got "SCRIPT600:Unknown runtime error".
Is there a way to stick some javascript into the DOM in IE?
And of course, as soon as I post this, I find http://www.phpied.com/dynamic-script-and-style-elements-in-ie/
var node = document.getElementsByTagName("head")[0] || document.body;
if (node)
{
var script = document.createElement("script");
script.type = "text/javascript";
script.text = json.javascript;
node.appendChild(script);
}
After assigning this: window.onload = initfunction;
I want to append the AJAX cross domain script to the header:
function initfunction() {
var dh = document.getElementsByTagName('head')[0];
var script = null;
script = document.createElement('script');
script.setAttribute('src', 'http://whatever.com/cgi-bin/ACD/ACD.js?'+location.href);
script.setAttribute('type', 'text/javascript');
dh.appendChild(script);
}
The script seems to be appended with the correct domain name, but Firebug says: "Failed to load source". If I type a fixed URL within the src attribute it works! e.g.:
script.setAttribute('src', 'http://whatever.com/cgi-bin/ACD/ACD.js?http://google.com');
Any ideas?
Assuming we're talking about ajax-cross-domain.com's script, shouldn't it be:
script.setAttribute('src', 'http://whatever.com/cgi-bin/ACD/ACD.js?uri=('+encodeURIComponent(location.href)+')');
Here is a simplified code snippet for test purposes. Just put this as an onload function or a script tag in the header. the webpage will continuously load...
var dh = document.getElementsByTagName('head')[0];
if(!dh)
{
//html page without "head"
head = document.createElement('head');
document.appendChild(head);
}
var script = null;
script = document.createElement('script');
script.setAttribute('src', 'http://domain.com/cgi-bin/ACD/ACD.js?' + location.href);
script.setAttribute('type', 'text/javascript');
dh.appendChild(script);
OK i got the solution. The problem was not the "location.href" itself, but a rule in our firewall that prohibits a GET request to the own server. Therefore the script throwed a timeout.