#src를 이용하여 iframe 안에 표시하는 방법?
본문
안녕하세요^^
https://www.sureman.com/#src%3Dhttps%253A%252F%252Fwww.sureman.com%252Flist%252Fnotice
http://named.com/#src%3Dhttp%253A%252F%252Fnamed.com%252Fbbs%252Fboard.php%253Fbo_table%253Dnotice
위와 같은 2개의 예제가 있습니다.
기본틀은 그대로 있고 메뉴를 클릭하면 iframe에 내용이 바뀝니다.
사이트 주소는 뒤에 #src url인코딩후 바뀌고요.
혹시 저걸 구현 할수 있는 방법이나 예제소스가 있을까요??
답변 1
첫번째 사이트 소스보면
function locationHref(frameSRC) {
var encodeSRC = encodeURIComponent("src=" + encodeURIComponent(frameSRC));
location.replace(location.href.split("#")[0] + "#" + encodeSRC);
if (navigator.userAgent.indexOf("Firefox") != -1) {
var link = document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = "/favicon.ico?v=160129"; document.getElementsByTagName("head")[0].appendChild(link);
}
return false;
}
이부분이 처리하는 함수인것 같습니다.
어떻게 사용을 해야할지 감이 안잡혀서요..
메뉴 링크에
<a href="locationHref('http://www.test.com/about.html');void(0)">메뉴1</a>
이런식으로요
아 함수는
function locationHref(frameSRC) {
var encodeSRC = encodeURIComponent("src=" + encodeURIComponent(frameSRC));
location.replace(location.href.split("#")[0] + "#" + encodeSRC);
if (navigator.userAgent.indexOf("Firefox") != -1) {
var link = document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = "/favicon.ico?v=160129"; document.getElementsByTagName("head")[0].appendChild(link);
}
mainFrame.location.href = frameSRC;
return false;
}
이렇게 수정해야겠네요.
프레임 대상이 될 범위는 어떻게 지정 해줘야할까요?
대상이 될 범위라는게 어떤걸 말씀하시는지 잘 모르겠지만
첫 참고사이트 경우는 윗쪽헤더와 오른쪽 사이드바 말고 컨텐츠 영역전체를 프레임으로
잡았네요. 그러니 그렇게 구성을 하신다면 해당 아이프레임에 들어갈페이지는 헤더 사이드바 푸터 다 빼고 기본 컨텐츠 페이지만 구성하시면 될꺼 같아요.
그리고 컨텐츠 길이에따라 아이프레임 높이가 변할 수 있도록 mainFrame에 onLoad이벤트 걸어서 높이 처리해주시면 되고요.
var $frame = $("#mainFrame");
$frame.on("load", function () {
$("body").scrollTop(0);
var $o = $("#frameWrap", $frame.contents());
$frame.css('height', $o.height() + 100);
});
이런식으로요
답변을 작성하시기 전에 로그인 해주세요.
