2014-01-14 80 views
5

所以基本上我試圖使用javascript來爲所有不同的瀏覽器編寫自定義標籤,但IE 8-9(未測試其他)似乎不能正常工作(真是一個驚喜)(我我試圖讓這個功能在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

雖然你不應該自己聲明自定義標籤,但如果你在'drop'標籤出現之前調用'document.createElement('drop');'source的某個地方,它應該可以工作。 –

+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是不重要的,它只是一個標識符。

    <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 <定製:選項> t2 t3 \t <自定義:選項> t4 t1&t2最終會說result1和t3&t4會以result2結尾 – Crushinator