javascript - 如何在图像 src 字符串中 document.write()？不被解析

Question

这适用于仅旨在在本地计算机上运行的 Javascript 应用程序，可从本地磁盘访问许多大型图像文件。

原始代码如下:

<script>
// Constants, var inits, etc.
</script>

<-- Then html stuff including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()" src="buttons/but_run.png">

<--then a chunk of javascript related to the buttons -->

一切正常，请参阅 http://everist.org/NobLog/20150424_js_animated_gallery.htm

现在我想扩展它，所以所有的图像路径名都定义为js常量和变量。有些会在浏览器页面的生命周期内保持不变，有些会改变用户操作。我坚持其中的一部分。如何让 html 解析器注意 语句中的脚本 block ？

具体来说，我想在图像 src 字符串中执行 document.write()。

Like: <img src="<script>document.write(B_PATH)</script>something.png">

这是用于初始页面显示。图像稍后会被脚本更改，并且工作正常。

但是 html 解析器似乎没有注意到 html 元素内的脚本。

我是一个 javascript nubie，所以我可能对它的工作原理有一些愚蠢的误解。我只是做错了，还是由于某些原因这从根本上是不可能的？

这是一个例子:

<script>
// Constants
PGL_BUT_PATH = "buttons/"      // where the button images etc are.
</script>

<-- some html stuff -->

<-- including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()"
src="<script>document.write(PGL_BUT_PATH);</script>but_run.png">

<--then a chunk of javascript related to the buttons -->

在调试器中，img 元素显示为:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="<script>document.write(PGL_BUT_PATH);</script>but_run.png"/>

目的是为了得到这个:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="buttons/but_run.png"/>

我可以放弃尝试让页面最初呈现正确的按钮，然后让 js 更正它们。我只是感到惊讶...难道不能通过这种方式在初始 html 解析期间评估 js 常量以构建 DOM 吗？

编辑添加:对不起，我的问题不够清楚。我想要的是一种方法，让 js 在页面首次呈现之前使 html 内容/DOM 正确(根据很早就定义的 js 配置值)。避免在首次渲染后出现任何闪烁或调整大小。

所以另一种解决方案是将第一页渲染延迟到某些脚本运行之后，这样它们就可以在用户看到任何东西之前进行初始 DOM 调整。有什么办法吗？嗯......实际上这会解决我遇到的另一个问题。我会尝试搜索它。

建议的语义模板工具很有趣(从未听说过。http://www.martin-brennan.com/semantic-templates-with-mustache-js-and-handlebars-js/)但我是否正确认为所有此类脚本附加组件将在页面首次呈现之后执行？

Answer 1

您不能将一个标签嵌入到另一个标签的属性中。所以你不能嵌入 <script>在src里面的 <img> .那只是无效的不会被解析的 HTML。

不过，您可以做的是事后编写属性:

<img id="uniqueId">

<script>
    var img = document.getElementById('uniqueId')
    img.setAttribute('src', PGL_BUT_PATH)
</script>

<img>没有 src 的标签其中的属性在技术上是无效的 HTML，尽管它可能无论如何都可以在任何浏览器中工作。但是，如果您想保持完全合法，请创建 <img>也可以使用 JavaScript。

<div id="uniqueId"></div>

<script>
    var elem = document.getElementById('uniqueId');
    var img = document.createElement('img');
    img.setAttribute('src', PGL_BUT_PATH);
    elem.appendChild(img);
</script>