获取js动态添加的元素

Question

我通过js加了$('.test').html('<iframe src="***" width="100%" height="250" frameborder="0" scrolling="no"; id="test_iframe"></iframe>');

想通过js监听iframe加载完成后做一些操作，

var visa_iframe = document.getElementById('test_iframe');
visa_iframe.onload = function () {
    alert('监听成功');
};

但是我这个地方就没法通过getElementById获取到新增的元素，请问有什么办法可以解决

Answer 1

修改 innerHTML 之后浏览器需要时间来进行重绘，重绘完成之前无法通过 DOM 接口获取新渲染的元素，大概是这个原因所致。
貌似在 IE 和火狐上，JS 会等待重绘完成再进行下一步，那么这段代码可能会如愿。
虽然可以通过 setTimeout 或者 requestAnimationFrame 的方式来延迟执行 JS ，但不是稳妥的方案，最稳妥的方案是直接监听 DOM 0 级事件：

$('.test').html(`
    <iframe
        src="***"
        width="100%"
        height="250"
        frameborder="0"
        scrolling="no"
        id="test_iframe"
        onload="alert('监听成功！')"
    >
    </iframe>`);

Answer 2

const iframe = document.createElement('iframe')
iframe.src=''
iframe.width='100%'
iframe.height='250'
/// 其他属性...
iframe.onload=function (ev){
   console.log(ev)
}
document.getElementsByClassName('test')[0].appendChild(iframe)