Google Apps脚本HTML服务和jQuery

Question

我正在使用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元素操纵？

感谢您的任何帮助。

Answer 1

我不同意@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>

Answer 2

您不能在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>