Using appendChild with IE in Javascript - javascript

I am having trouble with this code in IE (with Chrome it seems to work fine):
<html>
<body>
<script type="text/javascript">
var scriptContent = "var whatever=1";
var _js = document.createElement('script');
_js.setAttribute('type', 'text/javascript');
textNode = document.createTextNode(scriptContent);
_js.appendChild(textNode);
document.getElementsByTagName('body')[0].appendChild(_js);
</script>
</body>
</html>
The error I get in Internet Explorer (IE9) is: "unexpected call to a method or access to a property" on statement "_js.appendChild(textNode)".
Is there any way to work around this problem?

As you can see here appendChild() in IE is not applied to <script>-elements.
(Seems as if IE9 supports it, but it depends on the browser-mode)
There was an correct answer before by Nivas, unfortunately it has been deleted.
In IE use
_js.text = scriptContent;

Your script is being executed before the DOM is ready, so getting the <body> tag is a race condition. I actually get the same error in Chrome 15 and Firefox 8.
You can see the code works when called after the page is loaded, for example in a function
HTML
append
JavaScript
function append() {
var scriptContent = "var whatever=1";
var _js = document.createElement('script');
_js.setAttribute('type', 'text/javascript');
textNode = document.createTextNode(scriptContent);
_js.appendChild(textNode);
document.getElementsByTagName('body')[0].appendChild(_js);
return false;
}

Related

Load a script dynamically within the <head> element

Okay so I'm trying to load a backup .js file synchronously in the event of a script dependency being unavailable, and everything seems to be working fine except for the fact that said script doesn't actually load, even though the element itself with the src is created:
[etc]
<head>
<script id = 'self'>
if (typeof jQuery === 'undefined') {
function insertAfter(referenceNode, el) {
referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}
var loadjq = document.createElement('script');
// backup CDN
loadjq.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
loadjq.type = 'text/javascript';
// loadjq.async = false;
insertAfter(document.getElementById('self'), loadjq);
}
</script>
// element IS created here: <script src = 'https://ajax.google...' type = 'text/...'></script>
// but nothing is executed
<script>
console.log($); // Reference Error
</script>
</head>
[etc]
Do note that I have not put this within a DOMContentLoaded event or anything, but I feel this should be working.
I tested with Chrome and Firefox, and it's not a caching error. Any suggestions?
Note, this isn't ideal, however if you absolutely need to you can use the following.
Use document.write to achieve this synchronously.
<script>
document.write(`jQuery is: ${typeof(jQuery)}.`);
</script>
<script>
document.write(`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>`);
</script>
<script>
document.write(`jQuery is: ${typeof(jQuery)}.`);
</script>
Note that you cannot have </script> in the string directly as this will terminate the actual script tag.

Firefox not firing onload for dynamic nested iframe

I have the following code that works on Chrome and MS Edge but not on Firefox.
Parent.html has this script.
<html>
<body>
<script>
var ifr1 = document.createElement('iframe');
ifr1.onload = function() {
alert("iframe 1 loaded") //fires on all browsers
script = ifr1.contentWindow.document.createElement('script');
script.src = 'PATH/TO/script.js';
script.onload = function() {
alert("script 1 onload") //fires on all browsers
};
ifr1.contentWindow.document.body.appendChild(script);
};
document.body.appendChild(ifr1);
</script>
</body>
</html>
It creates an iframe and loads script.js within that iframe.
Here is script.js which does the same thing like above -
var ifr2 = document.createElement('iframe');
ifr2.onload = function() {
alert("iframe 2 loaded") //doesn't fire on Firefox
script = ifr2.contentWindow.document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js';
script.onload = function() {
alert("script 2 onload")
};
ifr2.contentWindow.document.body.appendChild(script);
};
document.body.appendChild(ifr2);
It creates another iframe ifr2 within the iframe ifr1 created by Parent.html.
Now, Chrome and Edge show all the alerts properly but Firefox doesn't fire the onload event for ifr2 loaded within ifr1 (even IE fires the onload for ifr2). Any idea why?
A workaround is to create a simple html page - even just <html><head></head><body></body></html> (maybe even less) .. lets call it empty.html
if you now change Parent.html to
<html>
<body>
<script>
var ifr1 = document.createElement('iframe');
ifr1.onload = function() {
alert("iframe 1 loaded") //fires on all browsers
script = ifr1.contentWindow.document.createElement('script');
script.src = 'PATH/TO/script.js';
script.onload = function() {
alert("script 1 onload") //fires on all browsers
};
ifr1.contentWindow.document.body.appendChild(script);
};
ifr1.src = 'empty.html'; // add this code *******
document.body.appendChild(ifr1);
</script>
</body>
</html>
Then it works as expected
Not sure why firefox does what it does - it could be because without the src attribute, the iframe's location is about:blank - but why the first one works and not the second is a mystery to me
edit: well, it did once then stopped again!!
OK, really strange - if you add ifr1.src = 'empty.html' it works ... if you duplicate that in script.js it breaks again
Not sure I've answered you well, but at least I've given you a working kludge :p
IMO this is a bug in Firefox because Firefox doesn't execute the load event inside iframes the way you would expect. The developers over at Mozilla may disagree. It all comes down to your definition of what "load" should mean, and it's more complicated than you think.
In any case the real issue is when to know it's safe to access ifr2.contentWindow, and the whole point of using ifr2.onload the way you did is so that you can figure out when ifr2.contentWindow exists.
Note, however, that the contentWindow and document are created immediately when document.body.appendChild(ifr2) executes, so if you move the appendChild() call to above your current code and remove the onload function, it will work as expected.
Alternatively you can change the onload function to something else and execute it directly after appendChild(), as such:
var ifr2 = document.createElement('iframe');
function loadit() {
console.log("iframe 2 loaded")
script = ifr2.contentWindow.document.createElement('script');
script.src = '...';
script.onload = function() {
console.log("script 2 onload")
};
ifr2.contentWindow.document.body.appendChild(script);
};
// add the iframe to the document
document.body.appendChild(ifr2);
// now execute your script stuff:
loadit()
This should work across all (modern) browsers.
While this is a bad practice and deprecated in chrome (it will show a warning in console.
adding this line before apending script tag fix the issue for me:
iframe.contentWindow.document.write('<html><head></head><body></body></html>');
It appears firefox needs it to init iframe and run javascript...

JavaScript Code is not working in IE8

The below piece of code is not working in IE8, but, it is working perfectly on FireFox and Google Chorome, Even, there is no error thrown by IE8, but, output is not coming. Any Idea? What is the actual problem?
<html>
<head/>
<body>
<script type="text/javascript">
(function(){
var inpEle = document.createElement("div");
inpEle.setAttribute("id", "div1");
var texEle = document.createTextNode("This is my Sample Para. I am testing it again my own level that prove How i am capable of.");
inpEle.appendChild(texEle);
document.body.appendChild(inpEle);
})();
(function(){
var inpEle1 = document.createElement("input");
inpEle1.setAttribute("type", "button");inpEle1.setAttribute("value", "Show");inpEle1.setAttribute("onclick", "Show()");
document.body.appendChild(inpEle1);
var inpEle2 = document.createElement("input");
inpEle2.setAttribute("type", "button");inpEle2.setAttribute("value", "Hide");inpEle2.setAttribute("onclick", "Hide()");
document.body.appendChild(inpEle2);
})();
</script>
<script type="text/javascript">
window.onload= function(){
document.getElementById('div1').style.display="none";
}
Show = function (){
document.getElementById('div1').style.border="2pt solid green";
document.getElementById('div1').style.display="";
}
Hide = function(){
document.getElementById('div1').style.border="";
document.getElementById('div1').style.display="none";
}
</script>
</body>
</html>
You may not be able to use document.body.appendChild() in IE8 before the </body> tag has been parsed and your code is trying to append to the body while it is still being parsed. Early versions of IE like IE6 might just abort (e.g. literally crash) when you did this. Later versions (like IE8) will just simply ignore your request.
You can use document.write() to add content while the body is being parsed.
You can postpone calling your code until after the body has finished loading and parsing (such a <body onload="xxx()"> handler) or when an event such as window.onload fires.
You can appendChild() to an element that has finished parsing (something that is before your script).
The simplest solution is probably to put a <div id="container"></div> in the body before your script and append to that instead of the body or put your code in a function and have the body onload event call your function.
See this article for description of the issue.
don't use setattribute use anonymous function for events
inpEle1.onclick = function() {
Show();
};
Also it works in IE tester in IE8, but not IE7, do you have it using IE7 compatibility
Go to Internet Options - Security Tab - Internet - click on the "Custom" button then scroll down to the Miscellaneous section."Allow script-initiated windows without size or position constraints" Find "Active Scripting" then check enable.
I noticed than element.style.display doesn't always work with IE8.
Here is a method to improve compatibility :
if (element.style.setAttribute)
element.style.setAttribute("display", value);
else
element.style.display = value;
Best regards,

getting the HEAD element from overlay.js firefox plugin

I have a lightwiehgt plugin to firefox which needs to inject a script into the HTML.
The code looks like this:
var head = document.getElementsByTagName("head")[0];
var newscrpt;
newscrpt = document.createElement('script');
newscrpt.type = "text/javascript" ;
newscrpt.src = "http://blabla.com/...";
newscrpt = head.appendChild(newscrpt);
The problem is that document.getElementsByTagName("head")[0] returns 'undefined', and checking document.getElementsByTagName("head").length is 0.
It currently executes on the browser document.onLoad event but I also tried calling it from window.setTimeout to make sure it is not a problem with loading synchronization, but the same happens.
Any ideas from anyone?
Thanks!
If you're using a frame or an iframe object, you should not reference the document directly but do something like:
var doc = frame.contentWindow.document;
After that you can get the head. I'm using jQuery to add some resources to it:
$(doc).find('head').append(
'<link type="text/css" rel="stylesheet" href="MyStylesheet.css" />');
Hope it helps.

How do I inject javascript to a page on IE 8?

Lets suppose that I have the following markup:
<div id="placeHolder"></div>
and I have a JavaScript variable jsVar that contains some markup and some JavaScript.
By using Mootools 1.1 I can inject the JavaScript content into the placeholder like this:
$('placeHolder').setHTML(jsVar);
This works in Firefox, Opera, and even Safari and the resulting markup looks like this:
<div id="placeHolder">
<strong>I was injected</strong>
<script type="text/javascript">
alert("I was injected too!");
</script>
</div>
However, on IE 8 I get the following:
<div id="placeHolder">
<strong>I was injected</strong>
</div>
Is there any way to inject the JavaScript on IE 8 or does it security model forbid me from doing this at all?
I tried Luca Matteis' suggestion of using
document.getElementById("placeHolder").innerHTML = jsVar;
instead of the MooTools code and I get the same result. This is not a MooTools issue.
This MSDN post specifically addresses how to use innerHTML to insert javascript into a page. You are right: IE does consider this a security issue, so requires you to jump through certain hoops to get the script injected... presumably hackers can read this MSDN post as well as we can, so I'm at a loss as to why MS considers this extra layer of indirection "secure", but I digress.
From the MSDN article:
<HTML>
<SCRIPT>
function insertScript(){
var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
var sScript="<SCRIPT DEFER>";
sScript = sScript + "function go2(){ alert('Hello from inserted script.') }";
sScript = sScript + "</SCRIPT" + ">";
ScriptDiv.innerHTML = sHTML + sScript;
}
</SCRIPT>
<BODY onload="insertScript();">
<DIV ID="ScriptDiv"></DIV>
</BODY>
</HTML>
If at all possible, you may wish to consider using a document.write injected script loading tag to increase security and reduce cross-browser incompatibility. I understand this may not be possible, but it's worth considering.
This is how we did it on our site about a year ago to get it working in IE. Here are the steps:
add the HTML to an orphan DOM element
search the orphan node for script tags (orphan.getElementsByTagName)
get the code from those script nodes (save for later), and then remove them from the orphan
add the html leftover that is in the orphan and add it to the placeholder (placeholder.innerHTML = orphan.innerHTML)
create a script element and add the stored code to it (scriptElem.text = 'alert("my code");')
then add the script element to the DOM (preferably the head), then remove it
function set_html( id, html ) {
// create orphan element set HTML to
var orphNode = document.createElement('div');
orphNode.innerHTML = html;
// get the script nodes, add them into an arrary, and remove them from orphan node
var scriptNodes = orphNode.getElementsByTagName('script');
var scripts = [];
while(scriptNodes.length) {
// push into script array
var node = scriptNodes[0];
scripts.push(node.text);
// then remove it
node.parentNode.removeChild(node);
}
// add html to place holder element (note: we are adding the html before we execute the scripts)
document.getElementById(id).innerHTML = orphNode.innerHTML;
// execute stored scripts
var head = document.getElementsByTagName('head')[0];
while(scripts.length) {
// create script node
var scriptNode = document.createElement('script');
scriptNode.type = 'text/javascript';
scriptNode.text = scripts.shift(); // add the code to the script node
head.appendChild(scriptNode); // add it to the page
head.removeChild(scriptNode); // then remove it
}
}
set_html('ph', 'this is my html. alert("alert");');
I have encountered the same issues with IE8 (and IE7)
The only way I could dynamically inject a script (with an src) is by using a timer:
source = "bla.js";
setTimeout(function () {
// run main code
var s = document.createElement('script');
s.setAttribute('src', source);
document.getElementsByTagName('body')[0].appendChild(s);
}, 50);
If you have inline code you would like to inject, you can drop the timer and use the "text" method for the script element:
s.text = "alert('hello world');";
I know my answer has come pretty late; however, better late than never :-)
I am not sure about MooTools, but have you tried innerHTML ?
document.getElementById("placeHolder").innerHTML
= jsVar;
You may need to eval the contents of the script tag. This would require parsing to find scripts in your jsVar, and eval(whatsBetweenTheScriptTags).
Since IE refuses to insert the content by default you will have to execute it yourself, but you can at least trick IE into doing the parsing for you.
Simply use string.replace() to swap all the <script> tags for <textarea class="myScript" style="display:none">, preserving the content. Then stick the result into an innerHTML of a div.
After this is done, you can use
div.getElementsByTagName("textarea")
to get all the textareas, loop through them and look for your marker class ("myScript" in this case), and either eval(textarea.value) or (new Function(textarea.value))() the ones you care about.
I never tried it, it just came to my mind... Can you try the following:
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = '//javascript code here'; // not sure if it works
// OR
script.innerText = '//javascript code here'; // not sure if it works
// OR
script.src = 'my_javascript_file.js';
document.getElementById('placeholder').appendChild(script);
You can use the same technique (DOM) to insert HTML markup.
I am sorry, perhaps I am missing something here--but with this being a mootools 1.11 question, why don't you use assets.js?
// you can also add a json argument with events, etc.
new Asset.javascript("path-to-script.js", {
onload: function() {
callFuncFromScript();
},
id: "myscript"
});
Isn't one of the reasons why we're using a framework not to have to reinvent the wheel all over again...
as far as the 'other' content is concerned, how do you happen to get it? if through the Request class, it can do what you want nicely by using the options:
{
update: $("targetId"),
evalScripts: true,
evalResponse: false
}
When you say it "works" in those other browsers, do you mean you get the alert popup message, or do you just mean the <script> tag makes it into the DOM tree?
If your goal is the former, realize that the behaviour of injecting html with embedded <script> is very browser-dependent. For example in the latest MooTools I can try:
$(element).set('html', '<strong>Foo</strong><script>alert(3)</script>')
and I do not get the popup, not in IE(7), not in FF(3) (however I do get the <script> node into the DOM successfully). To get it to alert in all browsers, you must do as this answer does.
And my comment is really late, but it's also the most accurate one here - the reason you're not seeing the <script> contents running is because you didn't add the defer attribute to the <script> tag. The MSDN article specifically says you need to do that in order for the <script> tag to run.

Categories

Resources