Статьи

Вставить на место без document.write

Март 12, 2019

Итак, вот ситуация: вы хотите объединить некоторый контент, используя JavaScript для извлечения данных (например, AdWords или аналогичные программы). Сценарий приобретения не может ничего знать о странице, на которой он используется — поэтому он не может зависеть от существования определенных элементов. Тем не менее, хост-страница должна иметь возможность контролировать, куда вставляется контент — сценарий синдикации должен вставлять контент везде, где находится <script>

Как ты делаешь это?

Ну, вы, вероятно, делаете то, что делает Google, и используете document.write Но document.write

  • document.write
  • содержимое, записанное в document.write
  • document.write

Но какова альтернатива? Методы создания DOM нуждаются в существующей ссылке на элемент для работы; даже innerHTMLгде писать HTML. И в обоих случаях простое добавление к <body>

Я столкнулся с этой дилеммой несколько дней назад, пока меня не осенило очевидное решение — у нас на самом деле есть предсказуемое возражение: сам элемент <script>

Все, что нам нужно, это способ идентифицировать включающий <script>insertBefore

Итак, учитывая сценарий приобретения с фиксированным идентификатором: 

 <script type="text/javascript" id="syndication" src="syndication.js"></script>

Мы можем уйти от олдскулской гадости вот так: 

 document.write('<p id="syndicated-content">Here is some syndicated content.</p>');

Для современной красоты, как это: 

 var newcontent = document.createElement('p');
newcontent.id = 'syndicated-content';
newcontent.appendChild(document.createTextNode('Here is some syndicated content.'));

var scr = document.getElementById('syndication');
scr.parentNode.insertBefore(newcontent, scr);

Мы могли бы даже пойти дальше и удалить идентификатор <script> Мы могли бы сделать это, зная его SRC 

 var scripts = document.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++)
{
    if(scripts[i].src == 'http://www.mydomain.com/syndication.js')
    {
        //scripts[i] is the one

        break;
    }
}

И вот он у вас — простой, но элегантный способ вставки контента на место, устраняя последние признаки необходимости в document.write

36
Share: