Question

I am trying to write a JS class to easily create Iframe HTML objects.
This is my code:

var Iframe = function (params) {
    var src = params.src || '';
    var appendTo = document.getElementById(params.appendId) || document.body;
    var iframe = document.createElement('iframe');
    iframe.src = src;
    if (typeof params.attrs != 'undefined') {
        for (attr in params.attrs) {
            iframe.attr = params.attrs[attr];
            alert('attr: ' + attr + "\nIframe.attr: " + iframe.attr);
            alert(params.attrs[attr]);
        }
    }

    appendTo.appendChild(iframe);

}

When the DOM loads:

var myIframe = new Iframe({
    src: 'http://www.example.com',
    appendId: 'iframeDiv',
    attrs: {height: '500px', id: 'ID'}
});

It alerts the expected values:

attr: height
Iframe.attr: 500px

and:

500px

But fails to set the arguments on the HTML, this is the generated source:

<div id="iframeDiv">
    <iframe src="http://www.example.com"></iframe>
</div>

What’s wrong?
How can I achieve this?

Thanks!

Answer 1

iframe.attr = params.attrs[attr];

I think you meant:

iframe[attr] = params.attrs[attr];

or:

iframe.setAttribute(attr, params.attrs[attr]);

You also forgot to declare attr, by the way.