iframe内计算器脚本仅控制台生效，如何修改document引用修复？

问题描述 #

我有一个嵌入在iframe中的计算器，页面加载后元素显示正常，但计算器无法工作。经测试，将iframe头部的脚本复制到浏览器控制台执行时，计算器功能可正常运行，推测问题出在iframe内的document引用上。由于该计算器代码为用户制作，仅能进行少量自动修改（如替换所有document引用），请问应将document替换为哪个对象才能解决此问题？

相关代码：

<iframe id="tool_iframe" scrolling="no" height="750" srcdoc="  <html>    <head>      <style>         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');body{  height:100vh;  background-color: #4158D0;background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);  font-family: 'Poppins', sans-serif;  background-position:center center;}      .container {        width: 520px;        background-color: #ffffff20;        margin: 120px auto;      }      table {        width: 100%;        border-color: transparent;          font-family: 'Poppins', sans-serif;                border-radius:20px;      }      td {        width: 25%;      }      button {        width: 100%;        height: 90px;        font-size: 32px;        background-color: white;        border: none;        color:#273342;      }      #inputLabel {        height:100px;        font-size: 60px;        vertical-align: bottom;        text-align: right;        background-color: #27334210;        color:white;        padding:0 10px 0 0;          font-family: 'Poppins', sans-serif;                border-top-radius:20px;      }      </style>      <script>         var inputLabel = document.getElementById('inputLabel');      function pushBtn(obj) {        var pushed = obj.innerHTML;        if (pushed == '=') {          //Calculate          inputLabel.innerHTML = eval(inputLabel.innerHTML);        } else if (pushed == 'AC') {          //All clear          inputLabel.innerHTML = '0';        } else {          if (inputLabel.innerHTML == '0') {            inputLabel.innerHTML = pushed;          } else {            inputLabel.innerHTML += pushed;          }        }      }      </script>    </head>    <body>       <html><body>    <div class="container">      <table border="1" cellspacing="0">        <tr>          <td colspan="4" id="inputLabel">0</td>        </tr>        <tr>          <td colspan="3"><button onclick="pushBtn(this);">AC</button></td>          <td><button onclick="pushBtn(this);">/</button></td>        </tr>        <tr>          <td><button onclick="pushBtn(this);">7</button></td>          <td><button onclick="pushBtn(this);">8</button></td>          <td><button onclick="pushBtn(this);">9</button></td>          <td><button onclick="pushBtn(this);">*</button></td>        </tr>        <tr>          <td><button onclick="pushBtn(this);">4</button></td>          <td><button onclick="pushBtn(this);">5</button></td>          <td><button onclick="pushBtn(this);">6</button></td>          <td><button onclick="pushBtn(this);">-</button></td>        </tr>        <tr>          <td><button onclick="pushBtn(this);">1</button></td>          <td><button onclick="pushBtn(this);">2</button></td>          <td><button onclick="pushBtn(this);">3</button></td>          <td><button onclick="pushBtn(this);">+</button></td>        </tr>        <tr>          <td colspan="2"><button onclick="pushBtn(this);">0</button></td>          <td><button onclick="pushBtn(this);">.</button></td>          <td><button onclick="pushBtn(this);">=</button></td>        </tr>      </table>    </div></body></html>    </body>  </html> "></iframe>

问题诊断 #

计算器失效的核心原因并非document引用错误——iframe内的脚本默认的document本来就指向自身的文档对象。真正的问题是脚本执行时机过早：放在<head>里的脚本会在<body>中的DOM元素（比如inputLabel）解析完成前就执行，导致document.getElementById('inputLabel')返回null，后续按钮点击调用pushBtn时，访问inputLabel.innerHTML会直接报错，功能瘫痪。而在控制台执行脚本时，页面已经完全加载，DOM元素都已存在，所以功能正常。

修复方案 #

方案1：仅替换document并调整执行时机（符合"少量自动修改"限制） #

将脚本中的document替换为document.currentScript.ownerDocument（确保始终指向iframe内部文档），同时把代码包裹在DOMContentLoaded事件监听中，等待DOM加载完成后再执行：

document.currentScript.ownerDocument.addEventListener('DOMContentLoaded', function() {
  var inputLabel = document.currentScript.ownerDocument.getElementById('inputLabel');
  window.pushBtn = function(obj) {
    var pushed = obj.innerHTML;
    if (pushed == '=') {
      inputLabel.innerHTML = eval(inputLabel.innerHTML);
    } else if (pushed == 'AC') {
      inputLabel.innerHTML = '0';
    } else {
      if (inputLabel.innerHTML == '0') {
        inputLabel.innerHTML = pushed;
      } else {
        inputLabel.innerHTML += pushed;
      }
    }
  };
});

方案2：更简单的无替换方案 #

直接把脚本从<head>移到iframe的<body>末尾（所有DOM元素之后），这样脚本执行时inputLabel已经存在，无需修改任何document引用：

<html>
  <head>
    <!-- 保留原样式代码 -->
    <style>
      /* 原样式内容 */
    </style>
  </head>
  <body>
    <!-- 保留原DOM结构 -->
    <div class="container">
      <table border="1" cellspacing="0">
        <!-- 原表格内容 -->
      </table>
    </div>
    <!-- 脚本移至此处 -->
    <script>
      var inputLabel = document.getElementById('inputLabel');
      function pushBtn(obj) {
        var pushed = obj.innerHTML;
        if (pushed == '=') {
          inputLabel.innerHTML = eval(inputLabel.innerHTML);
        } else if (pushed == 'AC') {
          inputLabel.innerHTML = '0';
        } else {
          if (inputLabel.innerHTML == '0') {
            inputLabel.innerHTML = pushed;
          } else {
            inputLabel.innerHTML += pushed;
          }
        }
      }
    </script>
  </body>
</html>

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