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

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




메인 페이지

parentIFrame 을 사용할려면 enablePublicMethods 를 true 로 설정해야 사용 가능 합니다.

<!DOCTYPE html>
<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>
<iframe style="width: 980px; border: none;" frameBorder="0" scrolling="no" src="Page1.html"></iframe>

<!-- iframe 보다 아래 와야 한다. -->
<script type="text/javascript">

// 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; }


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>

<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">


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

if ('parentIFrame' in window) {
window.parentIFrame.scrollTo(0, 0);
location = "page2.html";




좋은 샘플 사이트가 존재하네요. http://davidjbradshaw.com/iframe-resizer/example/

Comments 0