114 lines
3.2 KiB
HTML
Executable File
114 lines
3.2 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" />
|
|
<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;
|
|
bottom: -10;
|
|
pxright: 0;
|
|
width: 200px;
|
|
height: 101%;
|
|
background-color: wheat;
|
|
}
|
|
a.top {
|
|
position: absolute;
|
|
bottom: -10px;
|
|
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,99999999);return false;"
|
|
>Bottom</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>
|
|
<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>
|
|
</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>
|
|
|
|
<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>
|