Data URI 및 MHTML 초급
12644 단어 html
Data URI
Data URI는 RFC 2397가 정의한 작은 파일을 문서에 직접 삽입하는 방안이다.작은 데이터를 웹 페이지에 직접 삽입하여 외부 파일에서 다시 불러올 필요가 없도록 하는 것이 목적이다. 현재 IE8, Firfox, Chrome, Opera 브라우저는 모두 이런 작은 파일의 삽입을 지원한다.다음 구문을 사용하여 작은 파일을 지정된 인코딩으로 만들어 페이지에 직접 포함할 수 있습니다.
data:[<MIME-type>][;charset="<encoding>"][;base64],<data> [type]/[subtype]; parameter이다. 예를 들어 png 그림에 대응하는 MIME는 이미지/png이다.parameter는 추가 정보를 지정할 수 있으며, 더 많은 경우text/plain과text/htm 등의 문자 인코딩 방식을 지정하는charset 인자입니다.기본값은 text/plain입니다.charset=US-ASCII. 지난 세기HTML4.01 Data Uri 시나리오 도입까지 지금까지IE6 및 IE7을 제외한 모든 메인스트림 브라우저에서 지원였지만 IE8의 Data Uri 지원에는 제한이 있음object(그림만 있을 때),img,input type=image,link와 CSS의 URL만 지원했고 데이터량은 32K 이상일 수 없습니다.
이점:
단점:
MHTML
MHTML은 MIME HTML (Multipurpose Internet Mail Extension HTML)의 줄임말로 RFC 2557가 정의한 멀티미디어 페이지의 모든 내용을 같은 문서 솔루션에 저장하는 것이다.이 방안은 마이크로소프트가 IE5로부터 제출한 것이다.0부터 지원, 그리고 Opera 9.0도 지원됩니다. Safari는 파일을 로 저장할 수 있습니다.mht(MHTML 파일의 접미사) 형식이지만 표시할 수는 없습니다.
MHTML과 Data URI는 비교적 유사하고 더욱 강력한 기능과 복잡한 문법이 있으며 Data URI에서'중복 이용될 수 없다'는 단점이 없지만 MHTML은 사용하기에 유연하고 편리하지 않다. 예를 들어 자원에 대한 인용 URL은 mht 파일에서 상대적인 주소가 될 수 있고 그렇지 않으면 절대적인 주소가 되어야 한다.hedger《Cross Browser Base64 Encoded Images Embedded in HTML》에서 IE에 대한 해결 방안을 상대적인 경로로 사용한 것은
Content-type:message/rfc822가 IE를 MHTML에 따라 해석하도록 성명했기 때문이며, 수정하지 않으면 MHTML 프로토콜을 사용해야 하며, 이럴 때는 절대 경로를 사용해야 한다《MHTML – when you need data: URIs in IE7 and under》.응용 프로그램
데이터 URI와 MHTML의 결합은 모든 주류 브라우저를 완전하게 해결할 수 있다. 캐시와 중복 이용이 불가능한 결함으로 인해 페이지에서 직접 사용하기에는 적합하지 않지만 CSS와 자바스크립트 파일에서 그림을 적절하게 사용하는 것이 매우 우수하다.
Content-type은 최종 데이터량이 감소했다.1) 웹 페이지에 표시되는 표준적인 방법은
2) CSS에서 body {background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAQAAAADCAAIAA7ljmRAAAAAAAAAGElEQQIW2P4DwcMDAxAfBvMAhEQMYgcaCEHG8ELxtbPAAAAAELFTkSuQmCC") 사용)
CSS에서 Data URI와MHTML을 쉽게 실현하기 위해 Data URI &MHTML 생성기를 썼습니다. 이를 이용하여 생성Data URI & MHTML 적용 인스턴스을 보실 수 있습니다.
CSS 파일에서 MHTML을 사용할 때 URL은 절대 경로를 사용해야 하기 때문에 매우 원활하지 않기 때문에 CSS expression을 사용하여 해결할 수 있다(DEMO. 예를 들어 다음과 같다.
/* http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(this));IE6 & IE7 호환
CSS Hacks를 통해 MHTML[3] 솔루션을 결합하여 IE6과 IE7이 DataURI를 지원하지 않는 상황을 해결합니다.
/*
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
--_ANY_SEPARATOR
Content-Location:somestring
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAA[...snip...]SuQmCC
--_ANY_SEPARATOR--
*/
#myid {
/* normal browsers */
background-image: url("data:image/png;base64,iVBORw0[...snip...]");
/* IE < 8 targeted with the star hack */
*background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}/*Content-Type: multipart/related; boundary="_"
--_
Content-Location:<identifier>
Content-Transfer-Encoding:base64
<data>
*/
selector{*background:url(mhtml:<stylesheet>!<identifier>);}여기서::구분자 지정(임의의 문자열)
identifier: 내용 위치 식별자 지정 스타일시트 절대 경로 지정
전체 코드 예
/*
Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:polloloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABkAAAAUBAMAAACKWYuOAAAAMFBMVEX///92dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYvD4PNAAAAD3RSTlMAACTkfhvbh3iEewTtxBIFliR3AAAAUklEQVQY02NgIBMwijgKCgrAef5fkHnz/y9E4kn+/4XEE6z/34jEE///A4knev7zAwQv7L8RQk40/7MiggeUQpjJff+zIpINykbIbhFSROIRDQAWUhW2oXLWAQAAAABJRU5ErkJggg==
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR--
*/
#test1 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC"); /* normal */
*background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml.css!locoloco); /* IE < 8 */
}
#test2 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAUBAMAAACKWYuOAAAAMFBMVEX///92dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYvD4PNAAAAD3RSTlMAACTkfhvbh3iEewTtxBIFliR3AAAAUklEQVQY02NgIBMwijgKCgrAef5fkHnz/y9E4kn+/4XEE6z/34jEE///A4knev7zAwQv7L8RQk40/7MiggeUQpjJff+zIpINykbIbhFSROIRDQAWUhW2oXLWAQAAAABJRU5ErkJggg=="); /* normal */
*background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml.css!polloloco); /* IE < 8 */
}
div {width: 100px; height: 100px; font: bold 24px Arial;}(1 + 1/3) * 2 * (1/3) = 8/9 http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php
Nicholas C. Zakas DataURI 자동화 도구 에서 온 명령줄 형식:
java -jar datauri-x.y.z.jar -o
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
