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

发布于 2024-12-27 02:32:58 字数 1109 浏览 2 评论 0原文

我特别谈论的是来自 ActiveState 的 IE 嵌入式脚本语言“PerlScript”。

我目前有以下内容，但是当按下按钮 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>

原文

I'm specifically talking about the IE embedded script language "PerlScript" from ActiveState.

I currently have the following, but when button 3 is pressed, no action happens.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一向肩并 2025-01-03 02:32:58

显然，这是一件非常难以实现的事情。浏览器（在我的例子中为 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 的偏见。

希望有帮助！

This is a very difficult thing to achieve, apparently. The browser (IE9 in my case) is expecting the value of the onclick attribute (when set from a script) to be a function reference rather than a string. We can prove this by converting your code into the equivalent JavaScript as shown below.

<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>

If we run this, the third button will appear, but clicking it will do nothing. We need to make only a minor adjustment to make this work in JavaScript.

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

Now, if we convert this back to the equivalent perlscript, we can see that it still doesn't work.

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");
}

In fact, it's a little bit worse because now, if you use your favourite HTML debugger to inspect the button 3 element, there is no onclick handler at all. So what can we do to get around this? Well, the answer is actually pretty simple - don't use PerlScript to create the elements dynamically, instead, create them statically and use PerlScript to hide and show them.

<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>

This seems to do the job nicely, although I'm not sure how well it will fit into your use case. There is of course, one massively weird thing in this code: the onclick handlers for each of the input elements explictly states that it is calling a JavaScript function. This is not true, obviously, as those functions are actually PerlScript subroutines. However, if you remove the javascript: prefix, then the handlers are never called. I think this just further highlights the browser's bias towards JavaScript.

Hope that helps!

回复收藏 0 原文

~没有更多了~