프로그래밍/jQuery 👍

iframe resizer 를 사용할 때 페이지간 이동시 화면 제일 위로 위치하기.

재우니 2018. 5. 1. 00:47

iframe resizer 를 사용할 때 페이지간 이동시 화면 제일 위로 위치하기..

https://davidjbradshaw.github.io/iframe-resizer/


iframeResizer.contentWindow.min.js

iframeResizer.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>