AJAX 호출에 의해 삽입된 IE 8에서 HTML5 요소를 "활성화"하는 방법은 무엇입니까?
질문 하단의 솔루션을 참조하십시오.
IE 8(및 그 이하)은 알 수 없는 요소(즉, 알 수 없는 요소)에서 제대로 작동하지 않습니다.HTML5 요소), 스타일을 지정하거나 대부분의 소품에 액세스할 수 없습니다.예를 들어 http://remysharp.com/2009/01/07/html5-enabling-script/ 과 같은 여러 가지 해결 방법이 있습니다. http://remysharp.com/2009/01/07/html5-enabling-script/
문제는 이것이 페이지 로드에서 사용 가능한 정적 HTML에 잘 작동하지만 나중에 HTML5 요소를 만들 때(예: AJAX 호출 또는 단순히 JS로 만들 때) 새로 추가된 요소를 다음과 같이 표시한다는 것입니다.HTMLUnknownElement하기로 되어 있는 대로HTMLGenericElement(IE 디버거에서).
새로 추가된 요소가 IE 8에서 인식/활성화될 수 있도록 이에 대한 해결책을 알고 있는 사람이 있습니까?
다음은 테스트 페이지입니다.
<html><head><title>TIME TEST</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<time>some time</time>
<hr>
<script type="text/javascript">
$("time").text("WORKS GREAT");
$("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion
$("time").text("UPDATE");
</script>
</body>
</html>
IE에는 UPDATE 및 NEW ELENT가 표시됩니다.다른 최신 브라우저에서 UPDATE 및 UPDATE를 볼 수 있습니다.
IE7의 모든 html5 이슈에 대해 html5shiv를 사용하고 agax calls innershiv로 돌아오는 html5 요소를 수용합니다.
이 두 개의 작은 플러그인은 지금까지 저에게 매력적으로 작동했습니다.
프라빈 구나세카라
jQuery는 요소를 만드는 어둡고 마법적인 방법을 가지고 있습니다.사용.document.createElement대신에 모든 차이를 만들어야 합니다.
var time = document.createElement("time");
time.innerHTML = "WORKS GREAT";
document.appendChild(time);
저는 당신이 그것을 사용할 수 있다고 믿지 않습니다..append()구문(예:.innerHTML += "")(HTML5 및 IE 포함).문제는 HTML5 요소를 사용하거나 표시하는 IE의 능력이 아니라 구문 분석하는 능력입니다.HTML5 요소를 프로그래밍 방식으로 인스턴스화할 때마다 다음을 사용해야 합니다.document.createElement.
저도 AJAX를 사용하여 서버에서 HTML5 요소가 포함된 HTML 묶음을 가져올 때 문제가 발생했습니다.html5shiv는 내 하루를 저장할 수 없었습니다.제 프로젝트 템플릿은 HTML5 Boiler Plate를 기반으로 하며 Modernizr을 사용하여 IE < 9에서 HTML5 태그 동작을 수정합니다. 이 스레드를 읽은 후 직감적으로 코드가 작동할 수 있었습니다.
새로 압축된 HTML을 DOM에 주입하는 데 문제가 있는 코드는 다음과 같습니다.
var wrapper = $('<div />')
.addClass('wrapper')
.html(data.html)
.appendTo(wrapper);
기본적으로 여기서 일어나는 일은 다음과 같습니다.
- 새 요소 생성
- 내면의새 요소의 HTML이 업데이트되었습니다.
- 내면을 가진 새로운 요소HTML이 DOM의 기존 요소에 추가됩니다.
다음으로 변경하면 문제가 해결됩니다.
var wrapper = $('<div />')
.addClass('wrapper')
.appendTo(el);
wrapper.html(data.html);
이제 발생하는 일은 다음과 같습니다.
- 새 요소 생성
- 비어 있는 새 요소가 DOM의 기존 요소에 추가됩니다.
- 내면의새로 추가된 요소의 HTML이 업데이트되었습니다.
이제 IE7도 제가 원하는 것처럼 비동기식으로 로드된 HTML5 요소를 표시할 수밖에 없습니다 :)
Julio 감사합니다. 나중에 필요할 때를 대비해 플러그인을 가까이에 보관해 두겠습니다.하지만 지금은 추가적인 DOM 조작의 오버헤드를 추가하지 않아요.
이 해결 방법은 다른 사람들에게도 적용될 수 있습니다.
innershiv 기능은 1.7 http://blog.jquery.com/2011/11/03/jquery-1-7-released/ 에서 jquery에 내장되어 있습니다.
토론에 기여하기 위해 이것을 남겨두는 것입니다.
스크립트는 @Gidon이 IE8에서 작동하지 않는 것 같다고 제공했습니다(두 개의 다른 기계에서 테스트됨).저는 아래를 참조하여 jQuery 플러그인을 다른 방법으로 다시 만들어야 했습니다.
/**
* Enable HTML5 Elements on the fly. IE needs to create html5 elements every time.
* @author Gidon
* @author Julio Vedovatto <juliovedovatto@gmail.com>
* @see http://stackoverflow.com/questions/2363040/how-to-enable-html5-elements-in-ie-that-were-inserted-by-ajax-call
*/
(function ($) {
jQuery.fn.html5Enabler = function () {
var element = this;
if (!$.browser.msie)
return element;
$.each(
['abbr','article','aside','audio','canvas','details','figcaption','figure','footer','header','hgroup','mark','menu','meter','nav','output','progress','section','summary','time','video'],
function() {
if ($(element).find(this).size() > 0) {
$(element).find(this).each(function(k,child){
var el = $(document.createElement(child.tagName));
for (var i = 0; i < child.attributes.length; i++)
el.attr(child.attributes[i].nodeName, child.attributes[i].nodeValue);
el.html(child.innerHTML);
$(child).replaceWith(el);
});
}
}
);
};
})(jQuery);
언급URL : https://stackoverflow.com/questions/2363040/how-to-enable-html5-elements-in-ie-8-that-were-inserted-by-ajax-call
'programing' 카테고리의 다른 글
| 부트스트랩 4에서 드롭다운의 화살표를 제거하는 방법은 무엇입니까? (0) | 2023.09.05 |
|---|---|
| PowerShell에서 데이터 세트를 순환하려면 어떻게 해야 합니까? (0) | 2023.09.05 |
| Spring에서 속성의 문자열 배열을 바인딩하는 방법은 무엇입니까? (0) | 2023.09.05 |
| 시간 초과와 함께 사용자 입력 대기 중 (0) | 2023.09.05 |
| Powershell: Receive-Job에서 출력 가져오기 (0) | 2023.09.05 |