javascript - JS for 循环设置 HTML 对象参数

Question

我正在尝试编写一个 JS 类来轻松创建 Iframe HTML 对象。这是我的代码:

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);

}

当 DOM 加载时:

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

它会提醒预期值:

attr: height
Iframe.attr: 500px

和:

500px

但是无法在 HTML 上设置参数，这是生成的源:

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

怎么了？我怎样才能实现这个目标？

谢谢!

Answer 1

iframe.attr = params.attrs[attr];

我想你的意思是:

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

或者:

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

顺便说一句，您还忘记声明attr。