쇼핑몰 상세페이지 아이프레임(iframe) 세로 자동 조절

etc.

쇼핑몰 상세페이지 아이프레임(iframe) 세로 자동 조절

dehas 2014. 1. 16. 11:24

쇼핑몰 상세페이지의 경우 빈번한 업데이트로 일일이 수정하여야 할 경우가 있습니다.
물론 이미지만 ftp로 덮어쓰기해도 변경은 되지만 요즘은 이미지뿐만 아니라 플래시등..
또한 자바까지 사용하는 경우도 있습니다.

쇼핑몰(오픈마켓, 종합몰 등) 같은 경우 대부분 iframe 태그는 적용(허용)이 됩니다.
문제는 iframe 사용시 세로사이즈를 지정해 주어야 하는데 그렇게 된다면 이것 또한 일일이 수정하여야
하므로 iframe 사용이 무의미합니다;;

세로사이즈가 자동으로 맞춰진다면 매우 좋겠지요.

일반 웹작업시에는 간단히 해결되지만 쇼핑몰 같은 경우는 조금 다릅니다.
쇼핑몰에 소스를 입력하고 등록하면 쇼핑몰은 부모페이지가 되고
iframe에서 불러오는 자식페이지는 전혀 관련없는 계정에서 불러오는 개념이므로 까다롭습니다.

또한 쇼핑몰 소스등록시 막아놓은 태그가 많습니다.
예를 들어 스크립트 및 링크등등..

막힘없는 소스구현을 위해서는 iframe 사용이 최선의 방법이 아닐까 합니다.

+ 쇼핑몰에 등록할 소스

+ 방법1

"상세페이지.html" 파일 (하단에 아래소스를 넣습니다. </body> 바로 위에 넣어주시면 됩니다)

설명) 위의 스크립트를 </body> 바로 위에 넣습니다.
이 스크립트가 적용되는 시점에서 세로사이즈가 계산되어 맞춰집니다.

* 문제점) 테스트 결과 한가지 문제점이 있습니다;;
          상세페이지에 불러올 이미지나 내용이 많다면 로딩이 완료되기 전에 위의 스크립트가 적용되어
            바로 잘려버립니다.
            즉, 이미지나 내용이 로딩되기도 전에 미리 스크립트가 적용이 됩니다;;
          이미지용량 및 호스팅속도에도 차이가 있겠지요..
           대략 이미지 세로 3000px 정도 되면 잘리는것 같습니다. 간단한 상세페이지에는 적용할 수 있을 것 같네요;;

+ 방법2

"상세페이지.html" 파일 (body 부분에 onload 추가하기)

팁) 만약 또다른 onload를 사용해야 한다면 같이 사용합니다. 예를들어 onload="abc();" 이라면..

<body onload="self.resizeTo(document.body.scrollWidth,document.body.scrollHeight); abc();">
위와 같이 추가해서 넣어주면 되고 ; 으로 꼭 마무리 합니다.

설명) 방법1과 동일한 소스이지만 body 부분에 적용하여 body 안에 모든 내용을 로딩 완료 한 후 세로사이즈를

계산하는 방식입니다.

* 문제점) 테스트 결과 Internet Explorer 7 에서는 self.resizeTo 자체가 오류를 발생합니다. 그런데 이상한건 되는 pc도 있네요;;

저작자표시