Порядок выполнения Javascript

Question

Я хочу передать статический блок кода javascript конструктору HTML-шаблонов, который может быть:

• встроенный или внешний или оба
• используется один или несколько раз в HTML-шаблоне

и каждый блок может определить свою позицию в шаблоне относительно других блоков кода JavaScript.

Примером могут служить баннеры с изображениями, обслуживаемые с помощью JavaScript. Я даю код дизайнеру шаблонов, который размещает его в двух местах: один раз для горизонтального баннера в заголовке и один раз для вертикального баннера. Один и тот же код выполняется в обоих блоках, но зная их положение, можно определить, будет ли размещаться горизонтальный или вертикальный баннер с изображением.

Имеет смысл?

Другой пример: скажем, у вас есть те же 2 тега javascript на веб-странице, которые вызывают внешний сценарий на сервере. Могут ли сервер и / или сценарии определить, к какому тегу javascript он принадлежит?

ПРИМЕЧАНИЕ : Можем ли мы сказать, что это вызов? Я знаю, что могу очень легко избежать этой загадки, но я сталкиваюсь с этим на регулярной основе.

Answer 1

Код JavaScript может найти все элементы <script> на странице и, вероятно, может проверить атрибуты и содержимое, чтобы проверить, из какого элемента он поступил. Но это, вероятно, не то, что вы хотите.

То, что вы хотите, это кусок JavaScript, который заменяет теги на странице рекламными баннерами. Обычное решение состоит в том, чтобы добавить специальный элемент, скажем, IMG, для этого и присвоить этому IMG id или class или, возможно, даже собственный атрибут (например, adtype="vertical"), а затем использовать JavaScript найдите эти элементы и замените содержимое, изменив атрибут src.

Например, используя jQuery, вы можете, если ваши изображения выглядят так:

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

Затем вы можете найти каждое изображение с помощью

$('img.ad')

[EDIT] Сервер, очевидно, знает, какой скрипт принадлежит какому тегу скрипта, потому что он вставляет скрипт. Так что это легко.

Если сценарий хочет выяснить, где он находится в DOM, добавьте что-то, что он может использовать для идентификации себя, скажем:

<script>var id= '329573485745';

Затем вы можете просмотреть все теги script и проверить, какой из них содержит значение переменной id.

Если вы вызываете внешний скрипт, вы можете сделать то же самое, но вы должны добавить идентификатор к тегу скрипта, когда вы генерируете HTML:

<script id="329573485745" src="..." />

Затем внешний скрипт может проверить DOM и найти элемент с этим идентификатором. Вы можете использовать UUID для этого, кстати.

Таким образом, фрагмент JS может найти тег сценария, который добавился на страницу.

Answer 2

Спасибо всем за советы, но я отвечу на свой вопрос.

Я придумал несколько способов выполнения этой задачи и дам вам тот, который хорошо работает и легко понять.

Следующий фрагмент кода опирается на вывод фиктивных элементов 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 3

Лучше всего было бы сделать функцию вставки один раз, а затем заставить его вставлять только вызов функции там, где это необходимо.

Как это:

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 4

Термин «статический блок кода» оставляет много места для интерпретации.

Встроенные сценарии (например, те, которые основаны на document.write и, следовательно, должны анализироваться и выполняться на этапе синтаксического анализа HTML), не могут определить, где они находятся в DOM во время выполнения. Вы должны сказать им (как в одном из первых полученных ответов).

Я думаю, вы, вероятно, обнаружите, что вам нужно изменить свой подход.

Распространенный способ сохранить код и разметку отдельно (что полезно при предоставлении инструментов для HTML-дизайнеров, которые не являются программистами) - это заставить их использовать тег script следующим образом:

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

У дизайнеров могут быть блоки на странице, заполненные кодом, который они помечают обычным для них способом (классы или атрибуты и т. Д.). Код выясняет, что он должен делать, основываясь на классах / атрибутах блоков, которые он находит при запуске.

Answer 5

Это не должен быть один и тот же код для каждого баннера - там будет параметр, переданный всему, что обслуживает баннер изображения, который будет указывать предполагаемый размер.

Можете ли вы привести конкретный пример того, для чего вам это нужно?

Для редактирования вашего недавнего примера: Простой ответ - нет. Я мог бы помочь вам подойти к проблеме с другой стороны, если вы опубликуете подробности вашей проблемы

Answer 6

Я не думаю, что для кода JavaScript возможно знать, откуда он был загружен. Конечно, он не запускается в той точке, в которой он найден, поскольку выполнение не связано напрямую с процессом загрузки (код обычно запускается после загрузки всего DOM). На самом деле, в случае с внешними объектами это даже не имеет смысла, поскольку будет загружена только одна копия кода независимо от того, сколько раз он встречается.

Answer 7

Почему бы не просто разместить вызов функции на странице вместо всего блока кода? Таким образом, вы можете передать параметр, чтобы указать, какой тип рекламы нужен?

BuildAd('Tower');

BuildAd('Banner');

Сам Javascript не имеет ни малейшего представления о своей позиции на странице. Вы должны настроить таргетинг на элемент управления на странице, чтобы получить его местоположение.