computed-style-cross-window-ref.html (1695B)
1 <!DOCTYPE HTML> 2 <title>getComputedStyle across windows</title> 3 <style> 4 p { color: blue } 5 6 div { margin: 1em 0 } 7 </style> 8 9 <script> 10 11 var gRunCount = 2; 12 13 function run() { 14 if (--gRunCount != 0) 15 return; 16 17 var i = document.getElementById("i"); 18 19 var pout = document.getElementById("out"); 20 var poutnone = document.getElementById("outnone"); 21 var pin = i.contentDocument.getElementsByTagName("p")[0]; 22 var pinnone = i.contentDocument.getElementsByTagName("p")[1]; 23 24 document.getElementById("res1").style.color = 25 window.getComputedStyle(pin).color; 26 27 document.getElementById("res2").style.color = 28 i.contentWindow.getComputedStyle(pout).color; 29 30 document.getElementById("res3").style.color = 31 window.getComputedStyle(pinnone).color; 32 33 document.getElementById("res4").style.color = 34 i.contentWindow.getComputedStyle(poutnone).color; 35 } 36 37 </script> 38 <body onload="run()"> 39 40 <p id="out">This is a paragraph outside the iframe.</p> 41 <div style="display:none"><p id="outnone">This is a paragraph outside the iframe.</p></div> 42 43 <iframe id="i" src="computed-style-cross-window-inner.html" onload="run()"></iframe> 44 45 <div style="color:fuchsia">This paragraph is the color that 46 outerWindow.getComputedStyle says the paragraph inside the iframe 47 is.</div> 48 49 <div style="color:blue">This paragraph is the color that 50 iframeWindow.getComputedStyle says the paragraph outside the iframe 51 is.</div> 52 53 <div style="color:fuchsia">This paragraph is the color that 54 outerWindow.getComputedStyle says the display:none paragraph inside the 55 iframe is.</div> 56 57 <div style="color:blue">This paragraph is the color that 58 iframeWindow.getComputedStyle says the display:none paragraph outside 59 the iframe is.</div>