computed-style-cross-window-ref.html 2.2 KB

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