如何使用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>
答
这显然是很难实现的。浏览器(在我的情况下是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的偏见。
希望帮助!
+1为PerlScript的绝对罕见的专业知识 – daxim 2012-06-09 14:45:18
达米安,这是一个很棒的答案。如果我可以多次投票,我会。感谢您花时间解释它。我认为在处理程序中添加“javascript:”的错误可能是IE的怪癖。 – 2012-06-12 18:37:29
@MikeCaron不用担心!谢谢你的谢意! – 2012-06-12 21:19:20