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

Question

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

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。