Archive

Posts Tagged ‘DOM’

Особенности переноса < script >.

September 18th, 2011 No comments

Если перед вами встанет задача изменить положение контейнера (DIV’а, SPAN’а, etc), содержащего внутри себя тег SCRIPT, при помощи JavaScript то вы столкнетесь с такой проблемой: после переноса все содержимое страницы будет заменено на результат работы содержимого этого SCRIPT (в независимости от того подключает ли этот тег внешний скрипт или содержит внутренний).

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

var scripts = obj.getElementsByTagName("script");
for (var n in scripts){
  obj.removeChild(scripts[n]);
}
// И уже чистый элемент
target.appendChild(obj);

То же самое на jQuery:

$(obj).find("script").remove();
// И уже чистый элемент
$(obj).appendTo(target);

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

var scripts = obj.getElementsByTagName("script");
var scripts_src_backup = Array();
var scripts_content_backup = Array();
for (var n in scripts){
  if(scripts[n].src !== undefined){
    scripts_src_backup.push(scripts[n].src);
  }else{
    scripts_content_backup.push(scripts[n].innerHTML);
  }
  obj.removeChild(scripts[n]);
}
// Переносим чистый элемент
target.appendChild(obj);
// Возвращаем скрипты на место
for (var n in scripts_src_backup){
  var new = document.createElement("script");
  new.src = scripts_src_backup[n];
  obj.appendChild(new);
}
delete(scripts_src_backup);
for (var n in scripts_content_backup){
  var new = document.createElement("script");
  new.innerHTML = scripts_content_backup[n];
  obj.appendChild(new);
}
delete(scripts_content_backup);

То же на jQuery:

var scripts_src_backup = Array();
var scripts_content_backup = Array();
$(obj).find("script").each(function(index, element){
  if(element.attr("src") !== undefined){
    scripts_src_backup.push(element.attr("src"));
  }else{
    scripts_content_backup.push(element.html());
  }
}).remove();
 
// Переносим чистый элемент
$(obj).appendTo(target);
 
// Возвращаем скрипты на место
for (var n in scripts_src_backup){
  $('< script type="text/javascript" ></ script >').attr("src", scripts_src_backup[n]).appendTo(obj);
}
delete(scripts_src_backup);
for (var n in scripts_content_backup){
  $('< script type="text/javascript" ></ script >').html(scripts_content_backup[n]).appendTo(obj);
}
delete(scripts_content_backup);

Таким образом элемент нормально переместился и скрипты остались рабочими.