|
0
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta charset="utf-8">
|
|
|
5 <title>iFrame message passing test</title>
|
|
|
6 <meta name="description" content="iFrame message passing test">
|
|
|
7 <style>
|
|
|
8 a.back { float:right; }
|
|
|
9 body {border:solid 1px red;}
|
|
|
10 p{padding:5px 212px 5px 5px;margin:0 0 5px;}
|
|
|
11 #abs{
|
|
|
12 position: absolute;
|
|
|
13 top:0;
|
|
|
14 right:0;
|
|
|
15 width: 200px;
|
|
|
16 height: 600px;
|
|
|
17 background-color: wheat;
|
|
|
18 }
|
|
|
19 </style>
|
|
|
20 </head>
|
|
|
21 <body>
|
|
|
22
|
|
|
23 <p>
|
|
|
24 <b>iFrame</b>
|
|
|
25 <a href="frame.content.html" class="back">Back to page 1</a>
|
|
|
26 </p>
|
|
|
27 <p>
|
|
|
28 This page has an absolute position elemnt 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 propeties.
|
|
|
29 </p>
|
|
|
30 <p>
|
|
|
31 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.
|
|
|
32 </p>
|
|
|
33 <p>
|
|
|
34 <b>Height Calculation Method</b>
|
|
|
35 <select name="heightCalculationMethod">
|
|
|
36 <option>bodyOffset</option>
|
|
|
37 <option>bodyScroll</option>
|
|
|
38 <option>documentElementOffset</option>
|
|
|
39 <option>documentElementScroll</option>
|
|
|
40 <option>max</option>
|
|
|
41 <option>min</option>
|
|
|
42 <option>grow</option>
|
|
|
43 <option>lowestElement</option>
|
|
|
44 </select>
|
|
|
45 </p>
|
|
|
46 <p>
|
|
|
47 <i>This option should be used sparingly, as the alternate methods can be less acurate 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="http://caniuse.com/mutationobserver">caniuse.com</a> for details).</i>
|
|
|
48 </p>
|
|
|
49
|
|
|
50 <div id="abs">Absolute positioned element</div>
|
|
|
51
|
|
|
52 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
|
|
53 <script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script>
|
|
|
54 <script>
|
|
|
55
|
|
|
56 $('select').on('change',function(){
|
|
|
57 if ('parentIFrame' in window){
|
|
|
58 parentIFrame.setHeightCalculationMethod($(this).val());
|
|
|
59 parentIFrame.size();
|
|
|
60 }
|
|
|
61 });
|
|
|
62
|
|
|
63 </script>
|
|
|
64
|
|
|
65 </body>
|
|
|
66 </html> |
