Переписать содержимое слоя с помощью Javascript

Одна из наиболее распространенных задач, с которыми веб-разработчики сталкиваются каждый день, — это изменение содержимого веб-страницы без дополнительных запросов к веб-серверу. Самый простой способ выполнить это назначение — использовать слои.

Здесь я покажу вам, как переписать содержимое слоя с помощью простой функции, которую можно многократно использовать в вашем коде Javascript. Эта функция работает в обоих основных браузерах — Netscape 4. * / 6/7 и IE 4/5/6. Рассмотрим этот фрагмент кода:

<DIV ID="MyLayer" style="position:absolute;top:10px; 

left:10px;">Initial layer text</DIV> 

 

<script language="Javascript"> 

function WriteLayer(ID,parentID,sText) { 

  if (document.layers) { 

    var oLayer; 

    if(parentID){ 

      oLayer = eval('document.' + parentID + '.document.' + ID + '.document'); 

    }else{ 

      oLayer = document.layers[ID].document; 

    } 

    oLayer.open(); 

    oLayer.write(sText); 

    oLayer.close(); 

  } 

  else if (parseInt(navigator.appVersion)>=5&&navigator. 

appName=="Netscape") { 

    document.getElementById(ID).innerHTML = sText; 

  } 

  else if (document.all) document.all[ID].innerHTML = sText 

} 

</script> 

 

<form> 

<br><br> 

<input type="button" value="Display Time" onclick="WriteLayer 

('MyLayer',null,Date())"> 

</form>

Давайте сначала подробнее рассмотрим WriteLayer() Функция принимает 3 параметра: IDparentID sText IDMyLayer Второй параметр parentID Это просто «слои внутри слоев». Пример вложенных слоев:

 <DIV ID= 

"ParentLayer"><div ID= "ChildLayer"></DIV></DIV>

У вас нет прямого доступа к вложенному слою в Netscape 4. *. Единственный способ получить к нему доступ через родительский уровень:

 var oChildLayer = document.ParentLayer.document.ChildLayer.document;

Когда мы вызываем WriteLayer()parentID Если уровень является вложенным, parentID

Третий параметр, sText

Наша WriteLayer() Если браузер Netscape 4. *, выполняется следующий код:

 var oLayer; 

if(parentID){ 

  oLayer = eval('document.' + parentID + '.document.' + ID + '.document'); 

}else{ 

  oLayer = document.layers[ID].document; 

} 

oLayer.open(); 

oLayer.write(sText); 

oLayer.close();

На первом этапе мы объявляем переменную oLayer На следующем шаге мы проверяем, является ли значение parentIDnull Если это не так, выполняется следующая строка:

 oLayer = eval('document.' + parentID + '.document.' + ID + '.document');

Для тех из вас, кто не знаком с функцией JavaScript eval()

Аргумент функции eval() Если строка представляет выражение, eval() Если аргумент представляет один или несколько операторов JavaScript, eval() Если мы вызываем нашу WriteText()

 WriteLayer("ChildLayer","ParentLayer","Some text...")

тогда выражение будет оценено как:

 oLayer = document.ParentLayer.document.ChildLayer.document;

Если параметр parentID null

 oLayer = document.layers[ID].document;

Получив ссылку на наш слой, мы просто открываем объект документа слоя, записываем в него значение sText и закрываем документ.

 oLayer.open(); 

 

oLayer.write(sText); 

 

oLayer.close();

Переписать содержимое слоя в Netscape 6/7 намного проще. Все, что нам нужно, это присвоить значение sTextinnerHTMLgetElementById

 document.getElementById(ID).innerHTML = sText;

Переписать содержимое слоя в IE тоже легко, потому что единственное, что нам нужно сделать, это присвоить значение sText свойству innerHTML нашего слоя, доступ к которому осуществляется через всю коллекцию:

 document.all[ID].innerHTML = sText;

Вы можете использовать WriteLayer()

Чтобы увидеть нашу WriteLayer()здесь .