2014-01-14 5 views
5

Так что в основном я пытался использовать javascript для написания пользовательского тега для всех разных браузеров, но IE 8-9 (не проверял других), кажется, не работает правильно (какой сюрприз) (I я пытаюсь сделать эту функцию совместимой в Chrome FF IE 8-10)с использованием вложенного getElementById IE

, если вы проверите это в другом браузере, вы увидите, что результат 2 не работает в IE, Я мог заставить его работать, как в примере, однако я бы предпочел использовать мое собственное имя тега, а не существующее.

Как я могу сделать результат 2 отображаемым в IE и по-прежнему использовать имя тега «drop»? Кроме того, я очень хочу, чтобы HTML, чтобы оставаться такой же и просто внести изменения в JavaScript, Заранее спасибо

http://jsfiddle.net/9GXtH/

<select id='a' style='display:none'> 
    <option id='b'>t1</option> 
</select> 

<drop id='c' style='display:none'> 
    <option id='d'>t2</option> 
</drop> 

<div id='result'></div> 

<div id='result2'></div> 


var queue = document.getElementsByTagName("select"); 
var options = queue.item(0).getElementsByTagName("option"); 

document.getElementById('result').innerHTML = options.item(0).innerHTML; 




var queue = document.getElementsByTagName("select"); 
var options = queue.item(0).getElementsByTagName("option"); 

document.getElementById('result').innerHTML = "result: " + options.item(0).innerHTML; 


var queue = document.getElementsByTagName("drop"); 
var options = queue.item(0).getElementsByTagName("option"); 

document.getElementById('result2').innerHTML = "result2: " + options.item(0).innerHTML; 
+2

В то время как вы не должны объявлять собственные теги самостоятельно, он должен работать, если вы вызываете 'document.createElement ('drop');' где-то в источнике, прежде чем появится тег 'drop'. –

+0

Если вам нужны новые элементы, вы должны использовать XHTML. См. [Разработка DTD с определенными и расширенными модулями] (http://www.w3.org/TR/xhtml-modularization/dtd_developing.html). –

+0

Моя конечная цель - использовать «пользовательский тег», чтобы при загрузке моей страницы я запускал javascript, который преобразует «настраиваемый тег» в обычный/типичный тег, такой как вход, я не хочу использовать тег, который потому что таким образом я ничего не сломаю. Как то, как работает пример выбора ... – Crushinator

ответ

1

Если у вас что-то вроде этого:

<custom:drop id='c1' style='display:none'> 
     <custom:option id='d1'>t2c1</custom:option> 
    </custom:drop> 
    <custom:drop id='c2' style='display:none'> 
     <custom:option id='d2'>t2c2</custom:option> 
    </custom:drop> 
    <custom:drop id='c3' style='display:none'> 
     <custom:option id='d3'>t2c3</custom:option> 
    </custom:drop> 
    <custom:drop id='c4' style='display:none'> 
     <custom:option id='d4'>t2c4</custom:option> 
    </custom:drop> 

Вы можете перебирать их в сценарии, как это:

$("custom\\:drop custom\\:option").each(function(){ 
      console.log($(this).html()); 
     }); 
+0

Это ближе к тому, что я пытаюсь сделать, но Мне действительно нужна двойная петля: вот моя попытка, к сожалению, я мог бы работать в Chrome и FF, но нет t IE: (я сделал это в блокноте, чтобы проверить, потому что jsfiddle, похоже, вообще не работает на нем) http://jsfiddle.net/Eamwp/ – Crushinator

+0

Должно быть тестирование пользовательских тегов на сервере, а не что-то, что было разработано ожидать нормальный html как jsfiddle. И загрузка страницы с двойным щелчком на рабочем столе, безусловно, не является хорошим подходом. Вы используете сервер? jsFiddle отлично, но не очень подходит для мышления вне коробки. – kellycode

+0

Я использую блокнот и браузер (IE-9), пытающийся быть совместимым с 8 – Crushinator

1

Пользовательские теги имеют трудное время, потому что браузер не имеет представления о том, что они так что у них фактически нет никаких свойств или методов по умолчанию, на которые можно положиться. Это макет страницы, который я использовал для создания пользовательских тегов в вашем примере, чтобы сделать то, что вам нужно:

  1. Я использовал декларацию объявления xhtml1.1 Doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Это на самом деле работает отлично с <!DOCTYPE html> но страница не будет проверять с W3C. Пользовательские теги никогда не будут проверяться, потому что валидатор понятия не имеет, каковы они.

  1. Добавлены соответствующие пространства имен и один дополнительный для моего пользовательского DTD: URL является irrelavent, это просто идентификатор.

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:custom="http://www.custom_dtd.org/xhtml">

  2. Включите кодировок и JQuery в голове.

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery.js"></script>

  3. Вместо того чтобы использовать getElementsByTagName на пользовательские теги, я использовал JQuery, потому что они пользовательские теги и DTD не знает, что пользовательский тег имеет или не имеет, насколько методы или свойства, и по умолчанию они не получаются. Но jQuery находит их вполне приличными. Насколько я понимаю, jQuery ищет доступные теги и ищет совпадение (следовательно, просмотр регулярных выражений).

  4. Я нашел это для работы в Chrome, FF и IE8/9/10 +, а не в IE7, но кому это интересно?

содержимое тела:

<select id='a' style='display:none'> 
     <option id='b'>t1</option> 
    </select> 

    // our custom tags 
    <custom:drop id='c' style='display:none'> 
     <custom:option id='d'>t2</custom:option> 
    </custom:drop> 

    <div id='result'></div> 

    <div id='result2'></div> 
    <script type="text/javascript"> 

     var queue = document.getElementsByTagName("select"); 
     var options = queue.item(0).getElementsByTagName("option"); 
     document.getElementById('result').innerHTML = options.item(0).innerHTML; 

     // have to escape the colon 
     var queue = $("custom\\:drop"); 
     var options = queue.find("custom\\:option"); 

     document.getElementById('result2').innerHTML = options.html(); 

    </script> 
+0

Возможно ли это сделать для нескольких отдельных вещей? В конце концов мне действительно нужно перебирает список «пользовательский тег» <обычай: стиль падения = «дисплей: нет»> <обычай: опция> t1 \t <обычай: option> t2

Смежные вопросы