iframe resizer 를 사용할 때 페이지간 이동시 화면 제일 위로 위치하기.
2018. 5. 1. 00:47
iframe resizer 를 사용할 때 페이지간 이동시 화면 제일 위로 위치하기..
https://davidjbradshaw.github.io/iframe-resizer/
iframeResizer.contentWindow.min.js
메인 페이지
parentIFrame 을 사용할려면 enablePublicMethods 를 true 로 설정해야 사용 가능 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://happyalliance.org/view/common/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="iframeResizer.min.js"></script>
</head>
<body>
==========
<br>
<iframe style="width: 980px; border: none;" frameBorder="0" scrolling="no" src="Page1.html"></iframe>
<br>
=========
<!-- iframe 보다 아래 와야 한다. -->
<script type="text/javascript">
iFrameResize({
// Disable if using size method with custom dimensions.
autoResize: true,
// Override the body background style in the iFrame.
bodyBackground: null,
// Override the default body margin style in the iFrame.
// A string can be any valid value for the CSS margin attribute,
// for example '8px 3em'. A number value is converted into px.
bodyMargin: null,
bodyMarginV1: 0,
bodyPadding: null,
// When set to true, only allow incoming messages from the domain
// listed in the src property of the iFrame tag. If your iFrame
// navigates between different domains, ports or protocols;
// then you will need to disable this option.
checkOrigin: true,
// If enabled, a window.parentIFrame object is created in the iFrame
// that contains methods outlined
enablePublicMethods: true,
// 'bodyOffset' | 'body<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>' | 'documentElementOffset' | 'documentElementScroll' |
// 'max' | 'min' | 'grow' | 'lowestElement'
heightCalculationMethod: 'offset',
// The default value is equal to two frame refreshes at 60Hz
interval: 32,
// Setting the log option to true will make the scripts in both the host page
// and the iFrame output everything they do to the JavaScript console
// so you can see the communication between the two scripts.
log: false,
// Set maximum height/width of iFrame.
maxHeight: Infinity,
maxWidth: Infinity,
// Set minimum height/width of iFrame.
minHeight: 0,
minWidth: 0,
// Enable scroll bars in iFrame.
scrolling: false,
// Resize iFrame to content height.
sizeHeight: true,
// Resize iFrame to content width.
sizeWidth: false,
// Set the number of pixels the iFrame content size has to change by,
// before triggering resize of the iFrame.
tolerance: 0,
// Called when iFrame is closed via parentIFrame.close() method.
closedCallback: function () { },
// Initial setup callback function.
initCallback: function () { },
// Receive message posted from iFrame with the parentIFrame.sendMessage() method.
messageCallback: function () { },
// Function called after iFrame resized.
resizedCallback: function () { },
// Called before the page is repositioned after a request from the iFrame
scrollCallback: function () {
return true; }
});
</script>
</body>
</html>
page1.html 의 iframe 내부 페이지
page1.html 은 iframe 안에 존재하는 데요. iframe resizer 를 사용할 경우, iframe 안에 있는 페이지들 간의 이동이 있을 경우 화면 위치가 동일해서 제일 위로 화면을 이동하기 위해서는 아래 처럼 각각의 페이지 마다 기술해줘야 합니다.
if ('parentIFrame' in window) {
window.parentIFrame.scrollTo(0, 0);
location = "page2.html";
}
page1.html 코드는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
</head>
<body>
<a id="btn">바로가기 to page2.html</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>
<script>
$("#btn").click(function(){
if ('parentIFrame' in window) {
window.parentIFrame.scrollTo(0, 0);
location = "page2.html";
}
});
</script>
</body>
</html>
좋은 샘플 사이트가 존재하네요. http://davidjbradshaw.com/iframe-resizer/example/
iframe 내부에서 모달창을 해당 위치에서 곧바로 띄울 경우.. jquery 의 mousemove 로 스크롤 위치값을 알아내서, div 의 top 위치를 조정하는 구문이다. 페이지 이동이 아닌 것이라면 아래 코드도 괜찮다.
<div class="button"><a href="javascript:;" class="quizCorrectCheck">
<img src="https://dbins2.speedgabia.com/skt/1999/images/section2_btn1.jpg" alt="정답확인"></a>
</div>
<div id="popup_quiz_incorrect" class="popup quizPop" style="left: 438.5px; top: 6763px; display: none;">
<div class="close btn"><a href="javascript:;">닫기</a></div>
<div class="content">
<div class="confirm closeBtn btn"><a href="javascript:;">다시풀기</a></div>
<img src="https://dbins2.speedgabia.com/skt/1999/images/popup_quiz_incorrect.png" alt="오답">
</div>
</div>
<script>
var mouseY;
//팝업
function openPopup(id) {
var offset = $(this).offset();
closePopup();
var popupid = id
var popupleftmargin = ($('#' + popupid).width()) / 2;
//$('#' + popupid).css({"top":$(document).scrollTop() + 50, 'left' : $(window).width() / 2 - popupleftmargin});
$('#' + popupid).css({"top":mouseY-300, 'left' : $(window).width() / 2 - popupleftmargin});
$('#' + popupid).show();
}
function closePopup() {
$('.popup').hide();
return false
}
$(document).mousemove(function(e){
mouseY = e.pageY;
});
$(document).ready(function() {
$(".quizCorrectCheck").click(function() {
if(userSelect != 0){
var thisAnswer = $("#quizContainer .quiz"+array1[thisQuizNum]).data('answer');
//console.log(thisAnswer)
if(thisAnswer==userSelect){
//alert("정답");
if(thisQuizNum >= 2){
//완료
openPopup("popup_quiz_correctAll");
}else{
openPopup("popup_quiz_correct");
}
}else{
//alert("오답");
openPopup("popup_quiz_incorrect");
}
}else{
alert("보기를 선택해주세요.");
}
});
});
</script>
'프로그래밍 > jQuery 👍' 카테고리의 다른 글
| input box 에 숫자 또는 float, hex, 금액 처리만 가능하게 하기 (0) | 2019.06.08 |
|---|---|
| IFRAME과의 DOMAIN 간 통신 (0) | 2018.05.03 |
| javascript : keyup 에 delay 딜레이 설정하기 (0) | 2018.04.25 |
| javascript 로 파라미터 parameter parse 해서 piwik 의 eventname 추가하기 (0) | 2018.04.19 |
| 행복얼라이언스 iframeresizer 활용 (0) | 2018.04.16 |