Opera GX空白页点击事件触发undefined function错误求助

算力阿峰

2026-6-22

问题解决：about:blank页面内联onclick提示函数未定义

问题背景

在Opera GX的about:blank页面中，使用内联onclick调用全局JavaScript函数时，会触发“函数未定义”错误，即使复制可正常运行的示例代码也无法解决，且该问题在多台设备上复现，但在Stack Overflow预览中正常。

原因

Opera GX（部分现代浏览器）对about:blank这类特殊空白页面有严格的安全限制，内联HTML事件属性（如onclick="x()"）无法访问脚本标签中定义的全局作用域函数，导致函数找不到。

解决办法

放弃内联事件绑定，改用JavaScript事件监听的方式，以下两种方案都可行：

方案1：DOM加载完成后绑定事件

<script>
  // 等待页面DOM元素全部加载完成
  document.addEventListener('DOMContentLoaded', () => {
    // 获取页面中的按钮元素
    const testBtn = document.querySelector('button');
    // 绑定点击事件
    testBtn.addEventListener('click', () => {
      console.log("thisWorks");
    });
  });
</script>
<button>点击测试</button>

方案2：用JavaScript直接创建并绑定按钮

这种方式完全避开DOM解析顺序问题，更稳妥：

<script>
  function x() {
    console.log("thisWorks");
  }
  // 创建按钮元素
  const btn = document.createElement('button');
  btn.textContent = '点击测试';
  // 绑定点击事件
  btn.addEventListener('click', x);
  // 将按钮添加到页面中
  document.body.appendChild(btn);
</script>