2

我正在使用 GAS HTML 服务来创建界面并尝试使用 Javascript 来处理客户端操作。

HTML 服务和 Caja 不支持“this”吗？

在我的 HTML 文件中，我有这个：

<input type="button" name="RemoveSample_1" id="RemoveSample_1" value="Remove" onClick="removeSampleNow(this)" />

和一个简单的 Javascript 函数来测试：

<script>
  function removeSampleNow(thisObj) {

    alert(thisObj.id);

  }
</script>

它可以在我的桌面上本地运行 html，但不能在 GAS 中运行。错误是“未定义”。

我们不能将参数传递给函数调用吗？那么我们如何基于一个选择/点击的按钮来驱动 HTML 元素操作呢？

感谢您的任何帮助。

4

2 回答 2

6

我不同意@mzimmerman，您可以使用 onclick html 属性（尽管 Caja 会操纵它）。在回调函数中，您通过参数访问元素，而不是“this”。

我知道有两种工作方式。第一个是最简单的。在回调函数中，元素将是参数，而不是“this”。

<html>
  <head>
    <script>
      function onClickCallback(element){
        console.log('element.id ' + element.id);
        element.value = 'Clicked!';
      }
    </script>
  </head>
  <body>
      <input type="button" name="b1" id="b1" value="Click me" onclick='onClickCallback(this)' />
  </body>
</html>

第二种方式利用 JQuery 的强大功能在运行时动态绑定回调函数，在这种情况下，回调函数确实通过 'this' 访问元素（并且函数不需要参数）。虽然第二个示例不是必需的（第一个解决方案可以正常工作），但我将其包括在内，因为您会发现 JQuery 之类的库为您提供了很多。

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
      // like onload but doesn't wait for images, only the dom
      $(document).ready(function() {
        // bind the click handler at run time
        $('#b1').click(onClickCallback);
      });

      function onClickCallback(){
        console.log('this.id ' + this.id);
        this.value = 'Clicked!';
      }
    </script>
  </head>
  <body>
      <input type="button" name="b1" id="b1" value="Click me" />
  </body>
</html>
于 2012-12-20T17:00:12.183 回答
1

您不能在 html 部分中使用 on click 属性。请参阅Caja限制。

有关如何执行此操作的示例，请参阅“动态添加脚本或外部 CSS”。

<script>
function doSomething() { alert('but this is fine!'); }
document.write('<input type="button" id="button1">')
document.getElementById('button1').onclick = doSomething;
</script>
于 2012-08-30T11:36:58.973 回答