如何在 HTML 中使用内联 JavaScript？

Question

支持我有这个隐藏字段：

<input type='hidden' id='handler' name='handler' value='5534882394' />

想象一下我通过 jQuery AJAX 从服务器获取 HTML 片段。

<div id='result'>
    <span></span>
</div>

但是，不要写这样的东西：

$(function(){
   $('#result span').text($('#handler').val());
});

我想使用类似的东西：

<div id='result'>
    <span>javascript:$('#handler').val();</span>
</div>

但是，我没有得到预期的结果。我可以在 JavaScript 中使用这种方法吗？

更新：大家好，我知道

$(document).ready();

。所以，不要提供更好的方法。我只是想知道是否可以使用内联 JavaScript，如果可以，如何实现？

Answer 1

不，您不能在 Javascript 中使用这种方法。不存在内联 Javascript 这样的东西。

您在

<a href="javascript:alert(1)">

之类的链接中看到的是

javascript:

伪协议，其用法与

http:

协议类似。当您将浏览器指向这样的 URL 时，浏览器就会运行脚本。

如果要在页面中运行脚本，则需要脚本标签。

Answer 2

你可以做-

<input type="text" id="handler" value="yes"/>
<div id='result'>
    <span>
       <script>document.write($('#handler').val());</script>
    </span>
</div>

页面会在点击 script 标签时运行 Javascript。您必须确保“#handler”元素已加载，否则脚本将失败。

一般来说，最好将此类脚本标签远离标记。

工作演示 - http://jsfiddle.net/ipr101/h6zXs/

Answer 3

虽然

<script>

标签可以工作并且可以让你做你想做的事情，但我真的建议重新考虑你的设计。这并不是您所说的“不引人注目的 Javascript”。

为什么你更喜欢混合使用 HTML 和 JS？如果是出于好奇 - 好吧，但如果这是为了变成生产代码，那么您可能希望尽可能地将两者分开。最终您将获得更好的可维护性。

Answer 4

您忘记了

<script>

标签吗？

<div id="result"></div>
<script>$('#result').text($('#handler').val();</script>

Answer 5

几年前，我遇到了同样的问题：我使用 AJAX 来检索 HTML，而 HTML 嵌入了 Javascript。 我从来没有找到比手动解析 HTML 来挖掘 Javascript 标签并对其内容调用

eval

更好的解决方案。 黑客且不可靠，但这是我能找到的最好的。

Answer 6

此答案仅用于教育目的。实际上不要这样做。

这段代码就可以解决问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <img src='invalid' onerror="$(this).replaceWith($('<span>').text($('#handler').val()))"/>
</div>

在 ES6 中：

<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <img src='invalid' onerror="
        let newElem = document.createElement('span');
        newElem.textContent = document.getElementById('handler').value;
        this.replaceWith(newElem);
    "/>
</div>

其工作方式是，一旦加载

img

元素，浏览器就会尝试获取

src

。由于

src

是无效值，因此会立即触发

onerror

，它可以执行您想要的任何操作 - 包括替换整个元素。

如前所述，更明智的解决方案是仅使用

script

标签。

<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <span></span>
    <script>
        document.querySelector('#result > span').textContent = document.getElementById('handler').value;
    </script>
</div>