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解析器注意脚本块WITHIN＆lt; img ....＆gt;语句？

具体来说，我想在图像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>的{{1}}内嵌入src。这只是无效的，不会被解析的HTML。

但是，您可以做的是在事实之后写出属性：

<img>

其中没有<img id="uniqueId"> <script> var img = document.getElementById('uniqueId') img.setAttribute('src', PGL_BUT_PATH) </script>属性的<img>标记在技术上是无效的HTML，尽管它可能无论如何都可以在任何浏览器中使用。但是如果你想保持完全合法，也可以用JavaScript创建src。

<img>

Answer 2

虽然我真的不知道你为什么要这样做。这个对我有用

<img id="pgb_runStop" onclick="click_runStop()"
     src = "about:blank"
     onerror="javascript:this.src = PGL_BUT_PATH + 'but_run.png'; this.onerror = null;>

或另一种方式

<script>
  function createImg(src) {
    document.write("<img src='" + src + "'>");
  }
</script>

<script>createImg(PGL_BUT_PATH + 'but_run.png')</script>

另一种更通用的方法

<script>
  function templete(temp, src) {
    document.write(temp.replace("$STR", src));
  }
</script>

<script>templete('<img id="pgb_runStop" onclick="click_runStop()" src="$STR"/>', PGL_BUT_PATH + 'but_run.png')</script>

Answer 3

Javascript本身并不是一个模板引擎，它看起来就像你在这里尝试实现的那样。查看javascript模板库，例如Handlebars，您将获得更多运气。

Answer 4

不幸的是，JavaScript并没有按照您将src 设置为 <script></script>的方式工作，所有浏览器都认为它只是一个奇怪的URL。尝试：

document.getElementById('pgb_runStop').src = PGL_BUT_PATH + 'but_run.png';

您可以将pgb_runStop更改为元素的ID。

您可以使用像 Angular.js 这样的框架来执行此类操作。我自己并没有使用angular.js，但你可以用它来制作一些非常不可思议的东西。

Here's a list of even more engines that you can use

<小时/> 您也可以使用：

document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');

基本上，你可以这样做：

(function(){window.onload=function(){
        document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');
};}());

哪个应该与完全相同相同

Answer 5

为什么不写下整个图像：

document.write('<img src="' + PGL_BUT_PATH + 'but_run.png"/>');

documentation

如何在图像src字符串中document.write（）？不解析

5 个答案: