2010-01-20 10 views
10

Robię ładowanie pliku w stylu ajax przez umieszczenie pliku w formularzu w elemencie iframe i zauważyłem pewne dziwne zachowanie w IE (zdaje się, że dzieje się to zarówno w 6 & 8). Zasadniczo w IE formularz nie jest poprawny iframe, więc odpowiedź pojawia się w nowym oknie (zamiast w iframe). Można odtworzyć problem z następującym minimalnym zestawem HTML/JS:Dziwne zachowanie atrybutu iframe `name` ustawionego przez jQuery w IE

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.3.2.js"></script> 
    <script> 
    $(document).ready(function(){ 
     var frameName = "myFrame"; 
     var $iframe = $("<iframe src=\"about:blank\" />") 
       .attr("name", frameName) 
       .appendTo("body"); 
     var $uploadForm = $("<form action=\"http://www.google.com/search\" />") 
       .attr("target", frameName) 
       .append("<input type=\"text\" name=\"q\" />") 
       .append("<input type=\"submit\" />") 
       .appendTo("body"); 
    }); 
    </script> 
</head> 
<body> 
</body> 
</html> 

Teraz (przed wysłaniem odpowiedzi), zrobiłem kilka badań (za pomocą narzędzi programistycznych IE8) i wydaje się, że .attr("name", frameName) faktycznie dodanie atrybut jako submitName="myFrame" zamiast po prostu name="myFrame". W oparciu o to, jak rozwiązać ten problem przez zmianę kodu do tworzenia iframe lekko nastier:

var $iframe = $("<iframe src=\"about:blank\" name=\"" + frameName + "\" />") 
     .appendTo("body"); 

Dokonanie tej zmiany sprawia, że ​​słupek formy w iframe jako pożądane.

Moje pytania są:

  • Dlaczego nie .attr("name", ...) działa zgodnie z oczekiwaniami?
  • Czy to błąd w jQuery, błąd w IE (na pewno nie!?!), Czy też brakuje mi czegoś oczywistego?
  • Gdzie jest atrybut submitName pochodzący z & jaki jest jego cel?

Odpowiedz

16

błąd w IE

trudno uwierzyć, wiem, ale nie jesteśmy (na pewno nie!?!) .

Historycznie (*) ustawienie atrybutu name ma wiele problemów w IE. Zwykle tylko częściowo utrzymuje. Na przykład w nazwach pól formularzy nie ma wpływu na odnośnik form.elements[name], tak jak powinien. Wydaje się, że jest to inny przypadek, w którym ustawienie właściwości name jest niewiarygodne.

Podczas gdy jQuery stara się obejść podobne błędy przeglądarki, nie przechwytuje wszystkiego i nie ma żadnego znanego sposobu rozwiązania go w pełni.

(*. W IE do 7. Po uruchomieniu IE8 w natywnym documentMode stosując standardy trybu doctype iw razie potrzeby na X-UA-Compatible nagłówka/meta, zarówno te błędy nie pojawiają się)

Pojawienie się w narzędziach dewelopera submitName jest interesującym spojrzeniem za kulisy błędu IE, ponieważ w ogóle nie pojawia się w publicznie widocznym DOM. Robi to samo, jeśli spojrzysz na element <input> lub <form>, którego atrybut name został zapisany po utworzeniu.

To, co się dzieje, polega na tym, że IE-up-to-7 przekierowuje całe użycie atrybutów o nazwie name do właściwości niewidocznej w inny sposób, zwanej wewnętrznie submitName, która dla pól formularzy zmienia dane, które pole wygeneruje jako część przesłania formularza, ale który nie zmienia rzeczywistego atrybutu name używanego do indeksowania HTMLCollection, grupowania radiowego, getElementsByName lub, w przypadku ramek [i], kierowania.

+0

Dzięki za tło, myślę, że jest to ostateczna odpowiedź, jaką mam zamiar uzyskać, odrzucając wszelkie zamieszczane przez byłych programistów IE (choć nie mogę sobie wyobrazić, że przyznają się do tego faktu: P), więc akceptuję to. Miło wiedzieć, że przynajmniej błąd rzeczywiście znika w IE8, jeśli masz właściwy doctype w miejscu. – Alconja

+0

'getElementsByName', radio-grupowanie i tak dalej działają, mimo że atrybuty' name' pozostają takie same i zmieniają się tylko atrybuty 'submitName'" - czy napotkaliście jakieś problemy z rzeczami, które wymieniliście? Testowałem to w ie7 trybie zgodności w ie8, i wszystko wydawało się działać. – cic

+0

Trochę więcej informacji: http://thunderguy.com/semicolon/2005/05/23/setting-nazwa-nazwisko-in-internet-explorer/ – cic

0

Widziałeś markup creation improvements w jQuery 1.4?

Jeśli okaże się, że brzydki, spróbuj tego:

$('<iframe />', 
{ 
    name: frameName, 
    src: 'about:blank' 
}).appendTo("body"); 
+0

Nie robi różnicy: ustawienie 'name' z nowego obiektu' {attrs} 'kończy się niepowodzeniem w taki sam sposób, jak ustawienie go za pomocą' attr() '. – bobince

+0

Wstydzę się, ulepszenia znaczników zasługują na pokazanie. +1 bobince –

+0

Tak, widziałem nową składnię (utknąłem z 1.3.2 dla tego projektu), ale to w rzeczywistości nie odpowiada na moje pytanie ... Problem nadal istnieje przy użyciu nowej składni i 1.4 mimo to (wierzę w to, co ty write jest faktycznie równoważny z moim oryginalnym '.attr (" name ", frameName)'). – Alconja

2

To nie jest tylko problem z jQuery, przy ustawianiu ręcznym też się zdarza.

Jeśli używasz metody setAttribute() do ustawienia, nawet bez jQuery, robi to samo, gdy właśnie utworzono formularz lub iframe! W ten sam sposób, używając innerHTML można go naprawić ... tak, po raz kolejny, że jest to mój dzień niszcząc Microsoft:/

4

tworzenia elementu jak to

$("<iframe name='frameName' />") 

rozwiązał problem dla mnie