iframe 태그 (비추천)
iframe을 통해 html을 import할 경우 문제점
- XSS 공격에 취약합니다. 악의적인 스크립트를 가지고 있는 사이트를 띄울 수 있다고 합니다. 물론 이래저래 공격을 피하는 방법으로 여러가지 방법이 제시되어 있긴합니다
- 외부 스타일 적용이 어렵습니다. 특히 height 값이 마음대로 조작되지 않는다고 합니다 (스크롤이 자동으로 생성됨) 제이쿼리로 해결하는 방법이 있다고는 하지만 매우 번거로운 것 같습니다
- 웹 크롤링 문제. iframe으로 불러온 소스는 숨겨져 있어서 찾기가 어렵습니다.
- 접근성, 사용성 저하 문제. 프레임 구조의 문서는 제목을 프레임 셋 본체의 <title> 제목으로 보여주기 때문입니다. 검색 엔진에 등록시 프레임셋 뿐만 아니라 메뉴용, 콘텐츠용 페이지들까지 함께 크롤링이 되는데, 경로로 들어가면 프레임에 넣어서 표시하도록 만든 페이지만 뜨게됩니다.
- frame으로 불러온 페이지의 데이터가 큰 경우 브라우저의 속도 저하가 우려
JS를 이용한 HTML include
- <head>에 <script src="js/includeHTML.js"></script>를 넣어준다.
- <body>에 <div include-html="navbar.html"></div>를 넣고 <script>includeHTML();</script>를 호출해준다. 여기서는 navbar를 관리하고 있다.
// includeHTML.js
function includeHTML() {
var z, i, elmnt, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
file = elmnt.getAttribute("include-html");
if (file) { xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
elmnt.innerHTML = this.responseText; elmnt.removeAttribute("include-html");
includeHTML();
}
}
xhttp.open("GET", file, true); xhttp.send(); return;
}
}
}html in html - html에서 html을 불러오자~
index.html 파일에 div의 id가 contents인 곳에 testContents.html 파일을 넣는다고 했을 때 쉽게 쓸수 있는 방법은 import와 Jquery load 가 쉬울 것 같다. 1. impot 를 사용한 방법 index.html <!DOCTYPE html>..
beableto.tistory.com
html in html - html에서 html을 불러오자~
index.html 파일에 div의 id가 contents인 곳에 testContents.html 파일을 넣는다고 했을 때 쉽게 쓸수 있는 방법은 import와 Jquery load 가 쉬울 것 같다. 1. impot 를 사용한 방법 index.html ..
beableto.tistory.com
https://doolyit.tistory.com/15
javascript / jQuery 개발시 PC, 모바일 접속유무 확인하기
웹사이트 개발시, PC환경에서 접속을 했는지 모바일에서 접속을 했는지 확인하기 위한 javascript 코드 입니다. navigator 객체의 platform 속성을 이용하여 확인을 하게 됩니다. 아래 링크는 navigator 객체의 P..
doolyit.tistory.com
https://www.html5rocks.com/ko/tutorials/webcomponents/imports/
HTML Imports: #include for the web - HTML5 Rocks
HTML Imports allows you to include HTML/CSS/JS in other HTML documents.
www.html5rocks.com
https://webclub.tistory.com/316
브라우저 호환성 대응 방안
Browser Compatibility - 브라우저 호환성 대응 방안 PC/모바일에서 사용하는 브라우저가 다양하고 각각의 레이아웃 엔진, Javascript 엔진이 다르고 지원하는 기능 범위도 차이가 있습니다. 부분적인 기능이지만..
webclub.tistory.com
http://blog.naver.com/PostView.nhn?blogId=jb7xx8r&logNo=220650589541
link rel=import 에 대한 설명
개요
blog.naver.com
'UXUI Development > Javascript' 카테고리의 다른 글
| 자바스크립트 async / await (0) | 2021.12.23 |
|---|---|
| API 문서 자동화 도구 (0) | 2021.12.14 |
| javascript 동적로딩 (0) | 2019.06.12 |
| script 내에 script호출 (0) | 2019.06.12 |
| 자바스크립트 (0) | 2019.05.29 |
| 날짜 분기 스크립트 (0) | 2019.05.29 |
| iframe/ContentDocument 프로퍼티 (+삼항연산자) (0) | 2019.04.04 |
| 여러개의 스크롤이벤트 사용시 (0) | 2019.03.19 |