Question

As such I need to be able to open an iframe as a layer on the page but can’t load up a framework given the weight and potential for conflicts as this is an addon to other sites.

The goal here is to be as light as possible while also avoiding crossover since sites using it may have jquery / yui or other scripting frameworks involved. The page is multi-part so a simple layer won’t do, it has to be a full fledged iFrame with the ability to fade the underlying window and close it down while also floating over page elements, drop downs, even flash.

Colorbox-min would be an ideal solution but the dependancy kills it.

I do pretty well with frameworks but on my own am a JS novice. In a world full of ready made scripts, Google isn’t being much help… Any suggestions on where to start?

Answer 1

If I understand correctly, you are trying to create an iframe and insert it to your page without using any framework, so here it is:

var frame = document.createElement('iframe');
frame.src= "http://www.google.com";
frame.width = "200";
frame.height = "200";
frame.style.position = "absolute";
frame.style.top = "30px";
frame.style.left = "30px";
frame.style.border = "solid 1px red";
document.getElementById("IdOfContainer").appendChild(frame);

Now, just for the sake of discussion, using jquery or yui or some other good quality library normally does not have any problems with clashes with other scripts, they take great care in protecting themselves from other scripts and not polluting other scripts namespaces.

Here’s a working sample of plain javascript and other using jquery