Question

我想给html模板设计师提供一个静态javascript代码块，可以是：

内联或外部或两者
在html模板中使用过一次或多次

并且每个块可以确定其在模板中相对于其他javascript代码块的位置。

一个例子可能是使用javascript提供的图片横幅。我将代码提供给模板设计师，模板设计师将其放在两个位置，一个用于标题中的水平横幅，一个用于垂直横幅。相同的代码在两个块中运行，但知道它们的位置可以确定是否提供水平或垂直图像横幅。

有意义吗？

另一个例子：假设您在网页上有相同的2个javascript标记，在服务器上调用外部脚本。服务器和/或脚本可以确定它属于哪个javascript标记吗？

注意：我们可以说这是一个挑战吗？我知道我可以很容易地避免这个难题，但我经常遇到这个问题。

Answer 1

JavaScript代码可以找到页面上的所有<script>元素，它可以检查属性和内容，以检查它来自哪个元素。但那可能不是你想要的。

您想要的是一段JavaScript，用广告横幅替换页面上的标签。通常的解决方案是为此添加一个特殊元素，例如IMG，并为IMG提供id或class或者甚至是自定义属性（例如{ {1}}）然后使用JavaScript查找这些元素，并通过更改adtype="vertical"属性来替换内容。

例如，使用jQuery，您的图像应该如此：

src

然后您可以使用

找到每个图像

<img src="empty.gif" width="..." height="..." class="ad" adtype="..." />

[编辑] 嗯，服务器显然知道哪个脚本属于哪个脚本标记，因为它插入了脚本。所以这是一个明智的选择。

如果脚本想要找出它在DOM中的位置，请添加可用于标识自身的内容，例如：

$('img.ad')

然后，您可以遍历所有<script>var id= '329573485745';代码并检查哪个代码包含变量script的值。

如果您调用外部脚本，则可以执行相同的操作，但必须在发出HTML时将ID添加到脚本标记中：

id

然后外部脚本可以检查DOM并使用此id查找元素。您将需要使用UUID，顺便说一句。

这样，一段JS可以找到将自己添加到页面的脚本标记。

Answer 2

最好的事情可能是插入一次函数，然后让他只在必要时插入函数调用。

像这样：

timescalled=0
function buildad(){
    var toinsert="" //Code to generate the desired piece of HTML
    document.write(toinsert)
    timescalled+=1 //So you can tell how many times the function have been called
}

现在可以在需要横幅的任何地方插入调用该函数的脚本块

<script type="text/javascript">buildad()</script>

Answer 3

感谢大家的提示，但我会回答我自己的问题。

我找到了完成任务的几种方法，并且我给你一个很好用且易于理解的方法。

以下代码块依赖于输出虚拟div和jQuery。

<script>
    // Unique identifier for all dummy divs
    var rnd1="_0xDEFEC8ED_";
    // Unique identifier for this dummy div
    var rnd2=Math.floor(Math.random()*999999);
    // The dummy div
    var d="<div class='"+rnd1+" "+rnd2+"'></div>";
    // Script which :
    // Calculates index of THIS dummy div
    // Total dummy divs
    // Outputs to dummy div for debugging
    var f1="<script>$(document).ready(function(){";
    var f2="var i=$('."+rnd1+"').index($('."+rnd2+"'))+1;";
    var f3="var t=$('."+rnd1+"').length;";
    var f4="$('."+rnd2+"').html(i+' / '+t);";
    var f5="});<\/script>";
    document.write(d+f1+f2+f3+f4+f5);
</script>

Answer 4

为什么不将函数调用放在页面而不是整个代码块上？这样你就可以传入一个参数来告诉它需要什么类型的广告？

BuildAd('Tower');

BuildAd('Banner');

Javascript本身并不知道它在页面中的位置。您必须在页面上定位控件以获取它的位置。

Answer 5

我认为JavaScript代码无法知道它的加载位置。它肯定不会在找到的位置运行，因为执行并不直接与加载过程相关（代码通常在加载整个DOM之后运行）。实际上，在外部的情况下，它甚至没有意义，因为无论遇到多少次，都只会加载一个代码副本。

Answer 6

每个横幅的代码不应该相同 - 会有一个参数传递给服务于图片横幅的任何内容，这些参数将指定预期的尺寸。

您能举一个具体的例子说明您需要这个吗？

要编辑您最近的示例：简单的答案是否定的。如果您发布问题的详细信息，我可以帮助您从不同的方向解决问题

Answer 7

术语“静态代码块”为解释留下了很大的空间。

内联脚本（例如，依赖于document.write的脚本必须在HTML解析阶段进行解析和执行）无法确定它们在运行时在DOM中的位置。你必须告诉他们（正如你得到的第一个答案之一）。

我想你可能会发现你需要改变你的方法。

保持代码和标记分离的常用方法（在向不是编码器的HTML设计人员提供工具时很有用）是让他们使用脚本标记，如下所示：

<script defer async type='text/javascript' src='pagestuff.js'></script>

...然后在加载页面时自动触发（如有必要，使用window.onload，但有几种技术可以提前触发，因为window.onload不会触发直到图像全部加载完毕。）

然后该脚本在标记中查找标记并相应地操作页面。例如（此示例使用Prototype，但您可以使用原始JavaScript，jQuery，Closure等执行相同操作）：

document.observe("dom:loaded", initPage);
function initPage() {
    var verticals = $$('div.vertical');
    /* ...do something with the array of "vertical" divs in `verticals`,
       such as: */
    var index;
    for (index = 0; index < verticals.length; ++index) {
        vertical.update("I'm vertical #" + index);
    }
}

然后，设计人员可以在页面上创建由代码填充的块，这些代码以对他们来说正常的方式（类或属性等）标记。代码根据运行时找到的块的类/属性计算它应该做什么。

Javascript执行顺序

7 个答案: