다른 도메인의 워드프레스 로그인을 Iframe으로 사용하기

기타정보

by 김일국 2016. 9. 8. 21:12

Ps. 하단의 소스는 jquery 를 사용하지 않는 순수 코드 입니다.

참고로 iframe 창크기를 자동조절하는 autoresize 함수는 아래와 같습니다.( 그누보드 기준 )

// iframe resize

function autoResize(i)

{

var iframeHeight=

(i).contentWindow.document.body.scrollHeight;

(i).height=iframeHeight+20;

}

</script>

요즘은 iframe 태그를 사용하지 않지만, 디자인 위주 사이트에 게시판이나 로그인, 회원관리만 사용한다면, 아직도 iFrame태그는 유용하다고 생각 됩니다. 일반적으로 워드프레스는 크로스브라우징보안때문에, 다른 도메인사이트에서 iFrame으로 가져올 수 없다고 알려져 있습니다. 하지만, 방법은 있습니다. 아래는 그 방법에 대한 내용 입니다.

워드프레스 로그인을 아래와 같은 iFrame태그로 불러올때, 크로스브라우징 보안때문에 작동되지 않습니다.

에러화면(아래) Refused to display... 'SAMEORIGIN'. 크롬의 에러메세지 입니다.

아래 소스를 수정하면 정상 작동 됩니다.

워드프레스 소스 수정위치: wordpress/wp-includes/functions.php 파일

function send_frame_options_header() {
//@header( 'X-Frame-Options: SAMEORIGIN' );//크로스브라우징 보안때문에 주석처리
}

결과화면(아래)

위 결과 화면의 html 코드는 아래와 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href="http://time-space.biz/wordpress/wp-login.php" target="contentFrame">로그인</a>
<div id="contents">
<iframe src="http://time-space.biz/wordpress/wp-login.php" id="contentFrame" name="contentFrame" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</div>
<script type="text/javascript">
function init(){
var pageheight = window.innerHeight;// 세로길이
if(pageheight == 0){
} else {
//alert(pageheight);//디버그
document.getElementById("contentFrame").height = pageheight+"px";
}
}
window.onload = function(){
init();
}
</script>
</body>
</html>

'기타정보' 카테고리의 다른 글

컴퓨터과학 개념에서 많이 사용되는 수도코드 및 그리스 문자 기호 (0)	2017.04.21
온라인 맞춤법 검사기 (0)	2017.01.02
사무실 이전을 완료 하였습니다. (0)	2016.07.30
야휴 날씨 API 서비스변경에 따른 코드변경처리 (0)	2016.04.19
홈페이지 개발환경을 Xampp 로 변경 하였음. (0)	2016.03.11