Получить окружающий элемент JavaScript

Question

У меня есть код, который выглядит так:

<div>
  <script type="text/javascript">
    (function() { 
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'localhost/chat/logo.js'); 
      var t = document.getElementById('craftysyntax'); 
      t.appendChild(s, t); 
    })(); 
  </script>
<div>

Я хочу, чтобы файл, который был загружен async ', мог сделать что-то вроде этого (примечание: это не работает код js, но это то, что я хочу сделать)

parent.appendChild(abc);

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

Итак, есть ли способ, которым скрипт может ссылаться на свой родительский контейнер?

Edit:
Почему я хочу это сделать?
Мой веб-сайт (интернет-магазин) использует программу чата со ссылкой на панели навигации, которая изменяется в зависимости от того, вошел ли оператор в программу чата. Я пытаюсь преобразовать программу в асинхронный загрузчик, но внешний js не может использовать document.write, если он был загружен асинхронно. Я пытаюсь преобразовать все вызовы document.write в сценарии, чтобы использовать dom.

Answer 1

Когда ваш код сразу же выполняется таким образом, последний элемент script будет текущим (из-за синхронной загрузки и выполнения).

Таким образом, вы можете получить ссылку на все script элементы, а затем получить последний, используя свойство length минус один.

Затем вы можете получить доступ к его родительскому узлу с помощью свойства parentNode.

<script type="text/javascript">
    var allScripts = document.getElementsByTagName('script'),
        thisScriptParent = allScripts[scripts.length - 1].parentNode;
</script>

jsFiddle .

Кроме того, нет необходимости использовать троичный для проверки на https. Просто используйте без протокола (//localhost/chat/logo.js), и он будет преобразован в протокол родительского сайта.

Answer 2

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

У меня будет встроенный скрипт, создающий собственный div с именем на основе текущего времени (или что-то в этом роде). Затем я могу передать идентификатор div другому сценарию в строке запроса. (У меня уже есть функция getQueryString)

Встроенный

<script type="text/javascript"> 
  var randval = "helpbox" + Math.floor(Math.random()*10000);
  document.write('<div id="' + randval + '"></div>');
  (function() { 
     var csc = document.createElement('script'); 
     csc.type = 'text/javascript'; 
     csc.src = 'a1.js?divid=' + randval; 
     var s = document.getElementById('help'); 
     s.appendChild(csc, s); 
  })(); 

Внешний

var my_div = document.getElementById(getQuerystring('divid'));

Answer 3

Не думаю, что вы можете надежно получить тег сценария, из которого выполняется код.

Я не уверен, почему ваш скрипт logo.js не просто напрямую получает элемент по его идентификатору(«craftysyntax»), но если вы ищете более общее решение (где вы можете, скажем, добавить несколько таких элементов / сценариев в документ в быстрой последовательности, не мешая друг другу), вы можете сделать что-то вродеэто:

<div>
  <script type="text/javascript">
    (function() { 
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'localhost/chat/logo.js'); 
      var t = document.getElementById('craftysyntax'); 
      if (window.global_chatElems == null)
        global_chatElems = [];
      global_chatElems.push(t);
      t.appendChild(s); 
    })(); 
  </script>
<div>

затем в вашем скрипте logo.js:

if (window.globalChatElems) {
  for (var i=0; i<globalChatElems.length; i++)
    processChatElem(globalChatElems[i]);
  window.globalChatElems = null;
  }

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