Using iframe instead of createpopup doesn't work?

Question

I used an iframe instead of window.createPopup, but it gives me an error in the console like "oDucument is not defiend".

Here's my code:

function ShowDropdown(oMenu, oMenuDropDown){
//Set popup html
var iframe='<iframe class="adframe" id="111" name="widget" src="#" width="300" height="250" marginheight="0" marginwidth="0" frameborder="no" scrolling="no"></iframe>';
var oframe = document.createElement('iframe');
    var oDocument = oframe.document;
oDocument.open();
var sHTML = "<html><head><link rel='stylesheet' type='text/css' href='../style.css'></head><body topmargin=0 rightmargin=0 leftmargin=0 bottommargin=0 style='overflow:visible;border-width:0px;'>"
            + oMenuDropDown.innerHTML + "</body></html>";
oDocument.write(sHTML);
oDocument.close();

//show popup
iframe.show(0, 0, 207, 50);}

What did I do wrong?

score 1 · Accepted Answer · edited May 23 '17 at 11:51

You are doing some really random things here.

var iframe='<iframe class="adframe" id="111" name="widget" src="#" width="300" height="250" marginheight="0" marginwidth="0" frameborder="no" scrolling="no"></iframe>';

You now have a string called "iframe", containing some HTML.
But you never use that string, except when calling

iframe.show(0, 0, 207, 50);

which most likely gives you an error because strings have no .show() function.

Parallel to that you create an iframe:

var oframe = document.createElement('iframe');

Assign it some contents:

var oDocument = oframe.document;
oDocument.open();
var sHTML = "<html><head><link rel='stylesheet' type='text/css' href='../style.css'></head><body topmargin=0 rightmargin=0 leftmargin=0 bottommargin=0 style='overflow:visible;border-width:0px;'>"
        + oMenuDropDown.innerHTML + "</body></html>";
oDocument.write(sHTML);
oDocument.close();

But then that's it, you don't do anything with it.

And if the error you get really says oDucument, then it must be outside of the code you show here, because there is no oDucument at all.
Also, oDocument is undefined because oframe.document doesn't exist, it's oframe.contentWindow.document, but even that will only be available after the iframe has been added to the DOM tree and has finished loading.

A much simpler solution would be to use a data: URI (see this answer):

function ShowDropdown(oMenu, oMenuDropDown)
{
    // Construct the element purely in JS:
    var iframe = document.createElement('iframe');
    iframe.className = 'adframe';
    iframe.id = '111';
    iframe.name = 'widget';
    iframe.width = 300;
    iframe.height = 250;
    iframe.marginWidth = 0;
    iframe.marginHeight = 0;
    iframe.frameBorder = 0;
    iframe.scrolling = 'no';
    // Set the position:
    iframe.style.position = 'absolute';
    iframe.style.top = '50px'; // Change this value to what you need
    iframe.style.left = '300px'; // Change this value to what you need
    // Set the contents:
    var sHTML = '<html><head><link rel="stylesheet" type="text/css" href="../style.css"></head><body topmargin="0" rightmargin="0" leftmargin="0" bottommargin="0" style="overflow:visible;border-width:0px">' + oMenuDropDown.innerHTML + '</body></html>';
    iframe.src = 'data:text/html;charset=UTF-8,' + encodeURI(sHTML);
    // Show popup:
    document.body.appendChild(iframe);
}

Also, consider removing the oMenu parameter since you're not using it.

score 0 · Answer 2 · answered May 10 '15 at 09:47

0

iframe elements don't have a show method, so going this way won't achieve what you're probably trying to do. You should probably put your dialog content in a positioned div and show that.

As for the error message, an iframe has no document property, and so it returns null. Calling open on a null value generates your error.

answered May 10 '15 at 09:47

Amit

45,440
9
78
110

1

*iframe elements don't have a show method* — That doesn't matter (yet), `show()` is being called on a string, not an iframe element (although strings don't have that method either) and the error is about trying to call `open` on `oframe.document`, not about calling `show`. – Quentin May 10 '15 at 09:55
What I was stating is that the entire solution won't work, regardless of the error, and the fact that the code ALSO confuses the ```iframe``` and ```oframe``` variables is irrelevant. As I wrote, the error is that there is no ```document``` property there. – Amit May 10 '15 at 12:59

Using iframe instead of createpopup doesn't work?

2 Answers2