오픈마켓 새창띄우기

오픈마켓 옥션,G마켓,11번가 아이프레임(iframe) 높이(세로) 자동조절

RYU™ 2011. 11. 16. 14:01
반응형





오픈마켓 상품수정
쇼핑몰 상세페이지를 작성하다 보면 일일히 수정해야 할 경우가 있습니다.
여간 번거로운일이 아닌데요...

아이프레임 속성만 제대로 알고 있어도 많은 시간을 절약할 수 있습니다.(시간=돈)
물론 이미지만 ftp로 덮어쓰기 해도 변경은 되지만 내용이 추가됐거나 이미지의 크기가 변경됐을 때는 덮어쓰기로는 안되기 때문에 이때 아이프레임을 사용하면 정말 유용합니다.


쇼핑몰(옥션,지마켓,11번가등)같은 오픈마켓의 경우 대부분 아이프레임(iframe)이 적용됩니다.
요세는 제품수가 많아지고 다양해지다보니 한페이지에 쭉~ 나열하기에는 스크롤 압박으로 쉽지 않은게 사실입니다. 여러개의 제품이 한꺼번에 나열되다보니 트래픽도 무시를 못하겠죠.
그래서 의류를 시작으로 종류가 다양한 제품들은 소비자 입장에서는 보기 편하고, 판매자 입장에서는 트래픽을 줄일 수 있는 생창띄우기를 많이 하고 있습니다.

즉, 페이지에 들어가면 제품에대한 기본정보만 노출시키고 상세정보는 클릭하면 볼 수 있게 하고 있습니다. 판매방법이 계속해서 진화하는 것 같네요.


아이프레임(iframe)은 옥션,지마켓,11번가에 단순히 이미지를 불러오는게 아니라 계정에서 아이프레임에 대한 페이지를 불러오는 개념이므로 조금 까다롭습니다.

초보자라면 여기서 많은 좌절?을 겪곤하죠.

하지만 한번 알고나면 정말 쉽고 편리한게 바로 이 아이프레임(iframe)입니다.



오픈마켓 제품등록 아이프레임(iframe)의 또다른 장점!!






 




[새창띄우기 기초] 오픈마켓 정말 간단한 롤오버 이미지 만들기
[새창띄우기 기초] 오픈마켓 나모웹에디터를 이용한 롤오버 이미지 만들기
[새창띄우기 기초] 오픈마켓 외부링크 차단, HTML, 새창띄우기, 상세페이지, 아이프레임, 팝업




옥션,지마켓,11번가 상세페이지 아이프레임(iframe) 높이(세로) 자동조절

제품을 등록할때 아이프레임 세로사이즈까지 지정해 준다면 한번 등록으로 번거롭게 수정하는 일이 사라집니다. 그만큼 시간이 절약되는거죠!!
문제는 아이프레임(iframe)의 세로 사이즈를 지정해 주어야 하는데, 이것 또한 일일이 수정해야 되서 여간 번거로운게 아닙니다.



제품정보를 추가하거나 새로운 제품을 추가할때..
아이프레임의 세로사이즈가 자동으로 조절되어 맞춰진다면 매우 좋겠지요.^^
여기 그 방법이 있습니다.


모르시면 그냥 따라하셔도 됩니다.^^
두가지 방법이 있는데 한번 도전해보세요!!




쇼핑몰에 등록할 아이프레임(iframe) 소스(예제)

<iframe src="상세페이지.html" width="가로사이즈" height="auto" marginwidth="0" marginheight="0" frameborder="no" scrolling="no"></iframe>





방법1
상세페이지.html 소스의 하단에 아래소스를 넣습니다.
</body> 바로 위에 넣어준다고 보시면 됩니다.

<script>
self.resizeTo(document.body.scrollWidth,document.body.scrollHeight);
</script>

이 스크립트가 적용되는 시점에서 세로(높이)사이즈가 계산되어 맞춰집니다.






방법2
상세페이지.html 소스의 <body>부분에 onload추가하기

<body onload="self.resizeTo(document.body.scrollWidth,document.body.scrollHeight);">


방법1과 동일한 소스지만 <body> 부분에 적용하여 <body> 안에 모든 내용이 로딩된 후 세로(높이)사이즈를 계산하는 방식입니다.


위 두가지 방법은 이미지 로딩속도가 느리거나 호스팅이 불안정할경우 문제가 발생할 수 있습니다.
완벽한 방법이라고 할수는 없지만 좋은 팁인건 사실입니다.
이걸 완벽하게 구현한다기보다 이런 방법도 있구나 라고 알아두시면 좋을 것 같네요.^^




[새창띄우기 기초] 오픈마켓 외부링크 차단, HTML, 새창띄우기, 상세페이지, 아이프레임, 팝업
[새창띄우기 기초] 오픈마켓 정말 간단한 롤오버 이미지 만들기
[새창띄우기 기초] 오픈마켓 나모웹에디터를 이용한 롤오버 이미지 만들기
[새창띄우기 기초] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 1탄
[새창띄우기 기초] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 2탄

반응형