如何用原生JS删除winbox.js动态创建的iframe内指定元素？

报错根因 #

• 调用new WinBox后你直接同步执行DOM查询，此时WinBox还未完成iframe元素的渲染挂载，document.getElementById('winbox-1')返回null，调用contentWindow自然会抛出 undefined 相关报错
• 即使提前拿到了iframe元素，也必须等iframe内部页面完全加载完成后才能操作内部DOM，否则也会出现元素找不到的问题

正确实现代码 #

"iframe": function(){
  // 保存WinBox实例，直接使用实例暴露的iframe属性，无需手动查询DOM
  const winbox = new WinBox("Groups", {
    url: "/localwebpage",
    class: "iframe"
  });
  // 监听iframe加载完成事件，加载完成后再操作内部DOM
  winbox.iframe.addEventListener('load', function() {
    const innerDoc = winbox.iframe.contentWindow.document;
    const targetEl = innerDoc.getElementById('toTop');
    // 判断元素存在再执行删除，避免额外报错
    targetEl && targetEl.remove();
  })
},

注意事项 #

• 确保iframe加载的页面和当前页面同源，否则同源策略会禁止操作iframe内部DOM，你当前用的是本地同域页面，无需额外处理
• 直接使用WinBox实例暴露的iframe属性比手动通过id查询DOM更稳定，不会因为WinBox后续版本id规则变化导致代码失效

内容的提问来源于stack exchange，提问作者Tom