开发者

DHTML, iFrame and IE

开发者 https://www.devze.com 2023-01-16 07:33 出处:网络
I\'ve got a piece of JavaScript that inserts/removes an iframe from the DOM. Everything is dandy in Chrome and FireFox but the iframe is not displayed in IE. The code below is the creation and inserti

I've got a piece of JavaScript that inserts/removes an iframe from the DOM. Everything is dandy in Chrome and FireFox but the iframe is not displayed in IE. The code below is the creation and insertion. When inspecting with a Developer tools I can see that the iframe is part of the DOM exactly as I expected it to be. Any suggestion on what might cause it not to be displayed?

function getiFrame(target) {
   var frame = document.getElementById(target);
   if (null == frame) {
       frame = document.createElement("iframe");
       frame.setAttribute("width", "100%");
       frame.setAttribute("height", "1000px");
       //frame.setAttribute("frameborder", "0");
       frame.setAttribute("id", target);
       frame.setAttribute("name", target);
       frame.setAttribute("src", "http://dmi.dk");
   } else {
       frame.src = "http://dmi.dk";
       frame.style.visibility = "visible";
   }

   return frame;
}

var frame = getiFrame(target);
var row = document.getElementById(contentRowId);
for (var i = 0; row.childNodes.length > 0; i++) {
         row.removeChild(row.childNodes[0]);
}

row.appendChild(frame);

EDIT: To clarify I've tryed setting开发者_开发知识库 the attributes directly (as suggested by Tim Down) the above was the result of my desperate attempts.

Further when inspecting the DOM I get a perfectly valid iframe tag:

<iframe propdescname="full" width="100%" height="1000" id="full" src="http://dmi.dk">

and inspecting that also shows that it's read and parsed the src (http://dmi.dk) correctly. I can inspect the DOM of that site too.

So what puzzles me is that when everything seems to work. What might stop it from being displayed.


There's one obvious problem:

frame = document.createElement("div");

should be

frame = document.createElement("iframe");

Also, setAttribute is unnecessary, verbose and error-prone in IE. Use DOM properties instead:

frame.width = "100%";
frame.height = 1000;
//frame.frameBorder = 0;
frame.id = target;
frame.name = target;
frame.src = "http://vrk.dk";


Jim Coplien referres to this as the Rubber Duck pattern. "You cannot ask xx before You've consulted the rubber duck". Who hasn't solved there own question while asking some one for advice.

I'was editing my post writing that the iframe was in a td and came to think that I hadn't made sure it actually was. The issue turned out to be me removing the td and inserting the iframe into the tr which IE incidentally handles differently when done dynamically than when done statically.

Thanks for listening in, playing the role of "the rubber duck"

0

精彩评论

暂无评论...
验证码 换一张
取 消