티스토리 뷰
발생일: 2014.12.05
키워드: jQuery, form, $(‘form’), IE8
문제:
버튼을 클릭하면 <form> 엘리먼트를 생성해 특정 주소로 서브밋하는 코드를 아래처럼 만들었다.
<form> 태그는 숨겨둔 채 전송하려고 `style` 속성도 정의했다.
function onClickButton() {
$(‘<form style=“display:none;”>’).attr({
target: ’targetFrame’,
method: ‘POST’,
action: ‘/some/path'
}).submit();
}
문제 없이 잘 동작한다.
어랏. IE8에서는 폼이 전송되지 않는다… 왜일까?
해결책:
`jQuery()` API 문서에 의하면, `jQuery()`의 파라미터로 문자열이 들어왔을 경우에 아래와 같이 동작한다.
- 문자열이 싱글 태그인 경우, `document.createElement()`로 태그를 생성한다.
- 복잡한 태그 형태일 경우, `<div>` 태그를 생성한 후에 `innerHTML`로 할당해 생성한다.
- 태그 형태가 아닐 경우, 셀렉터로 동작한다.
‘복잡한 태그 형태’로 추가할 때엔 설명처럼 `innerHTML`로 할당하기 때문에,
태그의 쌍이 맞지 않거나 불완전한 태그일 경우, 몇몇 브라우저에서 올바르게 동작하지 않을 수 있다.
예를 들어,
- 특정 브라우저에서는 `<html>`, `<head>`, `<title>` 등의 엘리먼트는 생성되지 않는다.
- IE8에서는 태그 쌍이 맞지 않을 경우, 특정 엘리먼트가 생성되지 않는다.
그 외에도,
- IE8에서는 `<a>` 태그의 `href` 속성이 절대 경로로 변경된다.
- IE9에서는 HTML5 엘리먼트는 생성되지 않는다.
위 문제도 태그가 완성되지 않았기 때문에 IE8에서 올바르게 동작하지 않았던 것이었다.
여러 브라우저 호환성을 위해, 태그 생성 시엔 단독으로 사용하거나, 항상 닫는 태그를 써주도록 해야겠다.
$('<form>') // Good
$('<form></form>’) // Good
$(‘<form method=“POST”>’) // Bad, IE8에서 엘리먼트가 생성되지 않는다.
$(‘<form method=“POST”></form>’) // Good
$(‘<div style=“display:none;”>’); // Bad, div 엘리먼트는 모든 브라우저에서 문제 없이 렌더링되지만 좋지 않은 습관이다.
$(‘<input>’) // Good
$(‘<input type=“text”>’) // Good (원래 싱글 엘리먼트인 경우)
$(‘<input … />’) // Good (XHTML 형태도 가능하다)
반응형
댓글
공지사항