128 lines
3.8 KiB
HTML
Executable File
128 lines
3.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>iFrame message passing test</title>
|
|
<meta name="description" content="iFrame message passing test" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<style>
|
|
a.back {
|
|
float: right;
|
|
margin-left: 8px;
|
|
}
|
|
body {
|
|
border: solid 1px red;
|
|
}
|
|
p {
|
|
padding: 5px 212px 5px 5px;
|
|
margin: 0 0 5px;
|
|
}
|
|
#abs {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 200px;
|
|
height: 600px;
|
|
background-color: wheat;
|
|
}
|
|
a.top {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p>
|
|
<b>iFrame</b>
|
|
|
|
<a href="frame.content.html" class="back">Back to page 1</a>
|
|
|
|
<a
|
|
href="#"
|
|
class=" back"
|
|
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,99999);return false;"
|
|
>Bottom</a
|
|
>
|
|
|
|
<a
|
|
href="#"
|
|
class=" back"
|
|
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollToOffset(0,0);return false;"
|
|
>Scroll to iFrame</a
|
|
>
|
|
|
|
<a href="#test" class="back">Jump to iFrame anchor</a>
|
|
<a href="#anchorParentTest" class="back">Jump to parent anchor</a>
|
|
</p>
|
|
<p>
|
|
This page has an absolute position element that take it out side the
|
|
normal document body, which is marked with a red border on this page. This
|
|
prevents the normal height calculation, which is based on the body tag
|
|
from returning the correct height. To work around this you can set the
|
|
<b>heightCalculationMethod</b> option to use one of the other page height
|
|
properties.
|
|
</p>
|
|
<p>
|
|
Use the dropdown to change the sizing method of the page, select the
|
|
different sizing options to see how the effect the page. Note that they
|
|
can have different effects in different browsers, so you are normally best
|
|
off selecting <b>max</b> if you need to change away from the default
|
|
<b>bodyOffset</b> option.
|
|
</p>
|
|
<p data-iframe-height>
|
|
<b>Height Calculation Method</b>
|
|
<select name="heightCalculationMethod">
|
|
<option>bodyOffset</option>
|
|
<option>bodyScroll</option>
|
|
<option>documentElementOffset</option>
|
|
<option>documentElementScroll</option>
|
|
<option>max</option>
|
|
<option>min</option>
|
|
<option>grow</option>
|
|
<option>lowestElement</option>
|
|
<option>taggedElement</option>
|
|
</select>
|
|
</p>
|
|
<p>
|
|
<i
|
|
>This option should be used sparingly, as the alternate methods can be
|
|
less accurate at working out the correct page size, can cause screen
|
|
flicker and can sometimes fail to reduce in size when the frame content
|
|
changes in browsers that do not support mutationObservers (See
|
|
<a href="https://caniuse.com/mutationobserver">caniuse.com</a> for
|
|
details).</i
|
|
>
|
|
</p>
|
|
<a name="test">Test in page anchor</a>
|
|
|
|
<div id="abs">
|
|
Absolute positioned element
|
|
<a
|
|
href="#"
|
|
class="top"
|
|
onclick="if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,0);return false;"
|
|
>Top</a
|
|
>
|
|
</div>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
|
|
|
<script
|
|
type="text/javascript"
|
|
src="../js/iframeResizer.contentWindow.min.js"
|
|
></script>
|
|
<script>
|
|
$('select').on('change', function() {
|
|
if ('parentIFrame' in window) {
|
|
parentIFrame.setHeightCalculationMethod($(this).val())
|
|
parentIFrame.size()
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|