如何使用PerlScript创建带按钮的HTML按钮并将其附加到DOM？

我正在专门讨论来自ActiveState的IE嵌入式脚本语言“PerlScript”。如何使用PerlScript创建带按钮的HTML按钮并将其附加到DOM？

我目前有以下内容，但按下按钮3时，不会发生任何操作。

<html> 
    <head> 
     <title>perlscript baby!</title> 
    </head> 

    <script language="perlscript" event="onload" for="window"> 
     sub yawn 
     { 
      $window->alert("hi!"); 
     } 
     sub createNew 
     { 
      $b = $window->document->createElement('button'); 
      $b->{value} = "button 3"; 
      $b->{onclick} = "yawn()"; 
      $window->alert("Button: " . $b->{outerHTML}); 
      $window->document->body->appendChild($b); 
     } 
     sub enable 
     { 
      undef $window->document->all('buttn 2')->{disabled}; 
     } 
    </script> 

    <body> 
     <input id='enabler' type='button' value='button 1' onclick='enable()'></input> 
     <input id='action' type='button' value='button 2' disabled onclick="createNew()"></input> 
    </body> 
</html>

来源

2012-01-13 Mike Caron

这显然是很难实现的。浏览器（在我的情况下是IE9）期望onclick属性的值（当从脚本设置时）成为函数引用而不是字符串。我们可以通过将代码转换为等效的JavaScript来证明这一点，如下所示。

<script language="javascript"> 
    function yawn() 
    { 
     window.alert("hi!"); 
    } 
    function createNew() 
    { 
     b = window.document.createElement('button'); 
     b.value = "button 3"; 
     b.onclick = "yawn()"; 
     window.alert("Button: " + b.outerHTML); 
     window.document.body.appendChild(b); 
    } 
    function enable() 
    { 
     window.document.getElementById("action").removeAttribute("disabled"); 
    } 
</script>

如果我们运行这个，第三个按钮会出现，但点击它什么都不会做。我们只需做一些小调整就可以在JavaScript中完成这项工作。

function createNew() 
{ 
    // ... 
    b.onclick = function() { yawn(); }; 
    // ... 
}

现在，如果我们把这个回相当于perlscript，我们可以看到，它仍然无法正常工作。

sub yawn 
{ 
    $window->alert("hi!"); 
} 
sub createNew 
{ 
    $b = $window->document->createElement('button'); 
    $b->{value} = "button 3"; 
    $b->{onclick} = sub { $window->yawn(); }; 
    $window->alert("Button: " . $b->{outerHTML}); 
    $window->document->body->appendChild($b); 
} 
sub enable 
{ 
    $window->document->getElementById("action")->removeAttribute("disabled"); 
}

事实上，这是一个有点差，因为现在，如果你用你最喜欢的HTML调试器来检查按钮3元，没有onclick处理的。那么，我们可以做些什么来解决这个问题？那么，答案其实很简单 - 不要使用PerlScript来动态创建元素，而是静态创建它们并使用PerlScript来隐藏和显示它们。

<html> 
    <head> 
     <title>perlscript baby!</title> 
    </head> 
    <script language="perlscript"> 
     sub yawn 
     { 
      $window->alert("hi!"); 
     } 
     sub createNew 
     { 
      $window->document->getElementById('button3')->style->{display} = "inline"; 
     } 
     sub enable 
     { 
      $window->document->getElementById("action")->removeAttribute('disabled'); 
     } 
    </script> 
    <body> 

     <input id='enabler' type='button' value='button 1' 
      onclick='javascript:enable();' /> 

     <input id='action' type='button' value='button 2' disabled 
      onclick='javascript:createNew();' /> 

     <input id='button3' type='button' value='button 3' style='display:none;' 
      onclick='javascript:yawn();'/> 

    </body> 
</html>

这似乎很好地做了这项工作，虽然我不确定它将如何适合您的用例。当然，在这个代码中有一个非常奇怪的事情：input元素的onclick处理程序明确声明它正在调用JavaScript函数。显然这不是真的，因为这些函数实际上是PerlScript子例程。但是，如果删除前缀javascript:，则处理程序将不会被调用。我认为这进一步凸显了浏览器对JavaScript的偏见。

希望帮助！

来源

2012-06-08 20:03:54

+1为PerlScript的绝对罕见的专业知识 – daxim 2012-06-09 14:45:18

达米安，这是一个很棒的答案。如果我可以多次投票，我会。感谢您花时间解释它。我认为在处理程序中添加“javascript：”的错误可能是IE的怪癖。 – 2012-06-12 18:37:29

@MikeCaron不用担心！谢谢你的谢意！ – 2012-06-12 21:19:20

如何使用PerlScript创建带按钮的HTML按钮并将其附加到DOM？

回答

相关问题