点击按钮打开iframe时控制台报Uncaught SyntaxError错误该如何解决

问题排查及修复方案 #

存在的错误点 #

• 两处修改search-bar hp元素innerHTML的代码，左侧开了小括号(但没有对应的闭合小括号)，这是触发Uncaught SyntaxError: Unexpected token ';'错误的直接原因
• iframe标签的width属性书写错误，缺少闭合单引号，原代码写为width=\'150，同时属性值缺少单位
• 完全重复写了两遍相同的DOM操作和函数定义代码，属于冗余内容
• 控制台定义的普通函数默认不会挂载到全局作用域，直接写在元素的onclick属性中会触发函数未定义的运行时错误，需要手动把函数挂载到window对象上
• 字符串内层的单引号不需要额外加转义符\，外层已经用双引号包裹的情况下转义符属于多余内容

修复后可直接运行的代码 #

// 插入绑定点击事件的按钮
document.getElementsByClassName("search-bar hp")[0].innerHTML = "<button class='btn btn-primary btn-sm' onclick='AbsenKuy()' style='background-color:#000000;color:white;'><span class='fa fa-bug'> Auto Absensi</span></button>";

// 将函数挂载到全局对象，确保onclick属性可以正常调用
window.AbsenKuy = function() {
  document.getElementsByClassName("post-topbar")[0].innerHTML = "<iframe width='150px' height='100px' src='http://elearning-man2kotabogor.sch.id/studentkelas/absensi/MTEyNUtaWQ==/U0VOQlVEX1hJX0tJTUlBX0FZRQ==/MTEyNQ=='></iframe>";
};

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