|
2
|
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 <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
8 <style>
|
|
|
9 a { float:right; margin-left:10px;}
|
|
|
10 </style>
|
|
|
11 </head>
|
|
|
12 <body>
|
|
|
13
|
|
|
14 <b>iFrame :Hover Example</b>
|
|
|
15 <a href="frame.content.html">Back to page 1</a>
|
|
|
16 </a>
|
|
|
17
|
|
|
18 <p>
|
|
|
19 Mouse over the code example below.
|
|
|
20 </p>
|
|
|
21
|
|
|
22 <xmp><!-- #code --></xmp>
|
|
|
23
|
|
|
24 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
|
|
25 <script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script>
|
|
|
26
|
|
|
27 <div id="code">
|
|
|
28 <style>
|
|
|
29 xmp{background-color: #eee;padding:0 20px;display:block;}
|
|
|
30 xmp:hover{border:#c33 solid 40px;}
|
|
|
31 </style>
|
|
|
32 <script>
|
|
|
33 (function(){
|
|
|
34 $('xmp').hover(function(){
|
|
|
35 if ('parentIFrame' in window) {
|
|
|
36 setTimeout(function(){ // Fix FireFox timing issue
|
|
|
37 parentIFrame.size();
|
|
|
38 },0);
|
|
|
39 }
|
|
|
40 });
|
|
|
41 })();
|
|
|
42 </script>
|
|
|
43 </div>
|
|
|
44
|
|
|
45 <script>$('xmp').text($('#code').html());</script>
|
|
|
46 </body>
|
|
|
47 </html> |
