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);
}
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.
In my app I open a new window with var w = window.open(). I access the CanvasJS API with:
var canvas = w.document.createElement('script');
canvas.type = "text/javascript";
canvas.src = "https://canvasjs.com/assets/script/canvasjs.min.js";
w.document.head.appendChild(canvas);
This works perfectly fine. I did the same thing with jQuery and made sure to append it before my own script yet I get this error: ReferenceError: $ is not defined
Here is what my code looks like:
var w = window.open('','_blank',width,height);
w.document.body.innerHTML = '<body> //create chart container here </body>';
var jQuery = w.document.createElement('script');
var canvas = w.document.createElement('script');
var script = w.document.createElement('script');
canvas.type = "text/javascript";
canvas.src = "https://canvasjs.com/assets/script/canvasjs.min.js";
jQuery.type = "text/javascript";
jQuery.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";
script.textContent = "//my script content here, this is where I use the '$' jQuery object";
w.document.head.appendChild(jQuery);
w.document.head.appendChild(canvas);
w.document.head.appendChild(script);
Even though you have inserted the script tag in the head but this does not mean that the script have been downloaded completely. You code runs before the browser is able to download jQuery. Dynamically inserted script tags perform async operation.
I suggest that you setup an interval and check if jQuery is available. Once it is available execute your code. Name the script element created for jQuery something else as it will interfere with checking for jquery within your interval.
var jqueryCheck = setInterval(function() {
if(window.jQuery) {
clearInterval(jqueryCheck);
// execute your code
}
}, 100);
I'm trying to pass a script into an iframe dynamically so it will run there (content in the example comes from the server) using this snippet:
content = '<script type="text/javascript">document.write("bla"");</script>';
el = document.getElementById('iframeName');
iframeDoc = el.contentWindow.document;
tempEl = iframeDoc.createElement('div');
tempEl.innerHTML = content;
It runs great on new browsers but when I try to run it on IE8 and lower, the innerHTML comes up null.
I tried different approaches but the inner HTML is the only option i can think of that can run the script i'm passing in to tempEl. Any ideas on how to pass content into tempEl.innerHTML so it will run the script and also work on IE8-?
Have you tried injecting the script element into the head of the document?
I am not to sure about script tags, but you must inject link and style elements into the head of a document for it to be interpreted correctly by older IE browsers.
var script = document.createElement('script');
script.type = 'text/javascript';
script.rel = 'JavaScript';
script.innerHTML = 'document.write("bla");';
var el = document.getElementById('iframeName');
iframeDoc = el.contentWindow.document;
iframeDoc.head.appendChild(script);
The solution I went with is:
el = document.getElementById('iframeName');
iframeDoc = el.contentWindow.document;
iframeDoc.write(content);
it's a lot shorter and is cross-browser (instead of using innerHTML).
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();
I'm trying to add Reddit buttons to my site, but they are not asynchronous, and Reddit tends to lag, slowing down page loads. When I look at what the script returns, I get something like this:
(function () {
var write_string = ...
document.write(write_string);
})()
I try to inject it into my page after a page load. I've tried both these methods in javascript after page load to no avail:
placeholder.innerHTML = '<script type="text/javascript" src="http://www.reddit.com/buttonlite.js?i=5"></script>'
var js = document.createElement('script');
js.type = 'text/javascript';
js.src = 'http://www.reddit.com/buttonlite.js?i=5';
placeholder.appendChild(js);
where placeholder is a DOM element <div class="reddit-button"></div>. Any ideas on how I could go about this?
You can "override" the document.write method:
window.onload = function() {
var oScript = document.createElement("script");
document.write = function(text) {
document.getElementById("placeholder").innerHTML += text;
};
oScript.src = "http://www.reddit.com/buttonlite.js?i=0";
document.body.appendChild(oScript);
};
This way the external code can call document.write as much as it wants to and you push the HTML to the proper place in your document.
Live test case - Tested OK under Chrome, Firefox and IE9 so guess it should be enough.