Rich Rodecker’s blog on flash, flex, actionscript, javascript, and php, with a dash of randomness
createElement and events, and iframe borders
A couple more things i learned today about using the DOM: First, when you are creating elements using createElement, you can usually set your attributes by using myElement.setAttribute(attributeName, “attributeValue”). Well, I had a bitch of a time today trying to figure out why nothing was happening in IE with the onclick attribute for an ‘A’ element I was creating. In all the mozillas everything worked fine…the onclick function i was assigning was firing correctly.
It turns out, IE expects you a function, not a string value for the onclick reference. Mozilla browsers will parse the string for the function so you dont get an error. There’s a couple of different ways to reconcile this, but the easiest and most cross-browser compatible I found was to just directly assign the onclick handler a function literal:
myNewElement.onclick = function(){
//dostuff
}
Even more of a pain in the ass was when i was dynamically generating a ‘IFRAME’ using createElement. again, IE was giving me problems…this time i could NOT get the border around the new iframe to go away for anything…i was setting both the frameborder and border properties to “0″ (and even tried “no”), and it would work in mozilla, but not IE. I tried some CSS stuff, that didnt work either. Finally i tried using frameBorder=0 instead….and it worked. Damn platform-dependent case sensitivity.
javascripting still SUCKS, even with the DOM and its methods.
Posted by flashape at 05:02 PM | Comments (4)
about 3 years ago
I’ve been having exactly the same problem. I created an iframe using the following code
objIFrame = document.createElement(“iframe”);
objContainer.appendChild(objIFrame);
And then set some other properties.
Turns out I had to set the frameBorder=0 before I appended the iframe to the parent! This code worked a treat
objIFrame = document.createElement(“iframe”);
objIFrame.frameBorder = 0;
objContainer.appendChild(objIFrame);
I hope this helps someone else
about 3 years ago
Thanks for your comments about the ‘onclick’ attribute to an anchor tag being a function. I had been trying to disable an anchor tag as follows:
link.removeAttribute("href");
link.removeAttribute("onclick");
but the onclick still fired when I clicked on it.
By changing this code to:
link.removeAttribute("href");
link.onclick = function() {};
it now works perfectly.
Thanks for saving me a few hours work!
Geoff
about 3 years ago
Thank you for the help, this was the last bug I had to fix of many when getting a page running in IE.
about 3 years ago
I knew about the camelcase for accessing CSS properties in Javascript… but differing implementations of document.createElement across browsers did my head in!
Got it worked out in the end…
about 3 years ago
I was looking for a solution to disable my anchor. I saw the Geoff Rimmer’s solution. It works but I needed to enable my anchor and it looks like setAttributte doesn´t work in IE. Then tried with Geoff Rimmer’s code. So this is what I found…
To disable the anchor:
anchor.onclick = function (){return false;};
To enable the anchor
anchor.onclick = function (){return true;};
about 2 years ago
Thanks, did a search on Google for that damn “frameBorder” problem and your post saved my life!
about 2 years ago
Thanks for this post. In my tests, it seems that it doesn’t matter if you set the frameBorder property before or after attaching to a parent element, it only matters that Border is capitalized.
Ugh.
about 2 years ago
Thank you very much, we were struggling with this onclick property problem in IE and now it works! Cheers
about 2 years ago
dude, had same problem, found your site after 2 hours of dealing w/ this stupid thing.
the same thing applies in atleast IE7 with marginHeight, the H must be capitalized.
sooo dumb.
about 2 years ago
Hi! You saved my day as well!
about 2 years ago
GREAT. I love you, I love the internet. Here I was breaking my head apart because of a stupid motherf**ker UGLY BORDER in my iframe… and then I found you, sharing your solutions.
wonder why people dont use much iFrames as they could… all the innerHTML and workarounds they do… and iFrame is there since ever.
I dont have an iMac nor IPhone, but damn I use a lot of iFrames!
(¬¬)
well… back to work!
about 2 years ago
Thanks..bro ur posting is very usefull for me… i hope u die and go to heaven…. ;p
about 2 years ago
Thanks for posting this! I was trying to get rid of the iframe borders in exactly the same situation. Phew. What a relief! I hate IE sometimes!
about 1 year ago
IE mother fuck…, i’ve spent 4 hours fighting with IE and JavasCript to solve this fuc…. problem. Many thanks for your post!!
IE sucks
about 1 year ago
Thank you very much, we were struggling with this onclick property problem in IE and now it works! Cheers
about 1 year ago
Thanks for this I too have just spent agaes trying to figure out why the border wouldnt go.
Yup ie is a pile of ……
about 1 year ago
Cool…really saving a lot of time of mine for the onclick javascript method in the createelement…
try {
element = document.createElement(“”);
} catch (e) {
element = document.createElement(“input”);
element.setAttribute(“type”, “checkbox”);
element.setAttribute(“checked”,”checked”);
}
element.setAttribute(“name”, count);
element.setAttribute(“id”, count);
//element.setAttribute(“onclick”,”setStatus(this)”);
element.onclick = function(){
var chkboxrowNo=this.name.slice(5);
if(this.checked) {
document.getElementById(“h0″+chkboxrowNo).value=”1″;
} else {
document.getElementById(“h0″+chkboxrowNo).value=”0″;
}
}
about 1 year ago
Thanks a lot, I found your frameborder post via google. I had the exact same issue, and now I have both fixed my issue and learned something new.
Great!
about 1 year ago
Thanks for your post!
It was a lifesaver
about 1 year ago
I ran into same issue with frameBorder propery. Thanks for your post.
about 10 months ago
“Finally i tried using frameBorder=0 instead….and it worked.”
Yo man, you just saved me.. was wondering why my frameborder attribute was doing nothing. Just the fucking “B”.. damn it.. thanks
about 10 months ago
To add, if you try to remove an iframe border once its been added to the DOM in IE, the only way to really remove it is as follows and again, this only works in IE as setting the frameborder dynamically seems to work in other browsers. This took me hours to figure out on my own so hopefully this will save someone else some serious time:
document.getElementById(“myiframe”).contentWindow.document.body.style.border = “0px”;
about 7 months ago
Thank you for the information about frameBorder. I spent 3 hours looking for the reason and was annoyed on knowing the reason.
Anyway guys thanks for the solution
about 6 months ago
Wait, let me get this straight:
or
works just fine
while
$(iframe).attr(“frameBorder”, “0″); works and
$(iframe).attr(“frameborder”, “0″); does not?
W T F ?
about 6 months ago
Jon, thank you so much for pointing out that you have to set the “frameBorder” attribute prior to attaching the iframe to the page (appending as a child)! I was using the correct camelcase but it would only work when the iframe was already part of the html… when I tried dynamically creating it and setting that attribute with JS it wouldn’t work… since I was setting it AFTER I attached it to the page.
Many thanks!