Можно ли надежно вставить элемент HTML в месте расположения скрипта?

Question

Я пишу файл Javascript, который будет компонентом веб-страницы.Я хотел бы, чтобы он был прост в использовании - просто обратитесь к файлу скрипта на вашей странице, и он там есть.С этой целью, однако, есть сложность - куда должен идти HTML, который генерирует Javascript?Один из подходов заключается в том, чтобы на странице требовался элемент-заполнитель с фиксированным идентификатором, классом или чем-то ещеНо это дополнительное требование.Было бы лучше, если бы HTML был сгенерирован в том месте, где размещен скрипт (или, в начале тела, если скрипт помещен в заголовок).Кроме того, для дополнительной возможности настройки, если будет найден фиксированный идентификатор, HTML-код будет помещен в этот заполнитель.

Поэтому мне интересно - как я могу определить местоположение моего скрипта на странице?И как мне разместить там HTML?На ум приходит document.write(), но это задокументировано как довольно ненадежное.Также это не помогает, если сценарий находится в голове.Не говоря уже о том, что происходит, если мой сценарий загружается динамически через какой-либо вызов AJAX, но я полагаю, что это можно оставить как неподдерживаемый сценарий.

Answer 1

document.write очень надежен, если используется, как вы указали (страница SharePoint 2010 по умолчанию использует его 6 раз). Если он помещен в head , он будет записывать содержимое сразу после элемента body. Хитрость заключается в том, чтобы создать одну строку HTML и написать ее за один раз, не писать фрагменты полуформированного HTML.

Альтернативой является использование document.getElementsByTagName('script') во время загрузки документа и предположим, что последним является текущий элемент скрипта. Затем вы можете посмотреть на родителя и, если это head , использовать событие load или DOM ready, чтобы добавить ваши элементы после тела. В противном случае просто добавьте его до или после элемента script, в зависимости от ситуации.

Answer 2

Я делаю это с этим кодом ...

// This is for Firefox only at the moment.
var thisScriptElement = document.currentScript,

// Generic `a` element for exploiting its ability to return `pathname`.
    a = document.createElement('a');


if ( ! thisScriptElement) {
    // Iterate backwards, to look for our script.        
    var scriptElements = document.body.getElementsByTagName('script'),
        i = scriptElements.length;

    while (i--) {
        if ( ! scriptElements[i].src) {
           continue;
        }

        a.href = scriptElements[i].src;
        if (a.pathname.replace(/^.*\//, '') == 'name-of-your-js-code.js') {
            thisScriptElement = scriptElements[i];
            break;
        }
    }
}

Затем, чтобы добавить свой элемент, это просто как ...

currentScript.parentNode.insertBefore(newElement, currentScript);

Я просто добавляю элемент script в любом месте (и несколько раз, если необходимо) в элемент body, чтобы включить его ...

<script type="text/javascript" src="somewhere/name-of-your-js-code.js?"></script>

Убедитесь, что код работает как есть, не в DOM ready или window load событие.

По сути, сначала мы проверяем document.currentScript, который является только Firefox, но все еще полезным (если он стандартизируется и / или другие браузеры реализуют его, он должен быть наиболее надежным и быстрым).

Затем я создаю общий элемент a для использования некоторых его функций, таких как извлечение path части href.

Затем я перебираю элементы script в обратном направлении (потому что в порядке разбора последний script элемент должен быть текущим script), сравнивая имя файла с тем, которое, как мы знаем, называется нашим. Вы можете пропустить это, но я делаю это, чтобы быть в безопасности.