结合跨浏览器JavaScript、DOM、swfobject和ActionScript 3的ExternalInterface

  • 时间:
  • 分类: Python

我使用一个swf背景网站上的所有内容.每一页都有相同的背景(swf),但具有不同的内容.我想div的高度同步的内容div的主权财富基金,主权财富基金好框架内容.我已经能够找到这种压倒性的迷但相当不成功让他们在一起.我一个完整的新手当涉及到javascript和actionscript所以我需要一个循序渐进的指南.我在最后期限,在这几个星期,我很沮丧.到目前为止,只有"工作"Safari在我多次刷新页面.所以我绝对需要一个crossbrowser javascript.同时,在阅读了一些网站说我试着让主权财富基金的高度等于100%,只是被动地扩大本身,而是给我有限的成功狩猎我不想把我的机会所以我需要JavaScript和actionscript 3之间的双向沟通,这是我发现ExternalInterface.然而,所有的教程我发现一切是如此特定于一个特定的项目或他们严重缺乏解释,我不能修改它们的目的.任何帮助这些拼图的碎片将不胜感激.1. 跨浏览器的JavaScript和DOM2. ExternalInterface actionscript 33.麻省理工4. 协调所有三个1. 我发现这crossbrowser代码获取属性.

选择 | 换行 | 行号
  1. <script type="text/javascript">
  2.  
  3. function getStyle(el, cssprop){
  4.  if (el.currentStyle) //IE
  5.   return el.currentStyle[cssprop];
  6.  else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  7.   return document.defaultView.getComputedStyle(el, "")[cssprop];
  8.  else //try and get inline style
  9.   return el.style[cssprop];
  10. }
  11.  
  12. var mydiv=document.getElementById("test");
  13.  
  14. alert(getStyle(mydiv, 'height')); //alerts 80px
  15.  
  16. </script>
  17.  

然而,我无法修改,这样我得到一个div并设置另一个div的高度,高度.这是我了一些有限的成功的代码:

选择 | 换行 | 行号
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Exp-5</title>
  7.  
  8. <script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
  9.  
  10. </script>
  11. <script type="text/javascript" src="swfobject.js"> 
  12. </script>
  13.  
  14. <script type="text/javascript"> 
  15.     swfobject.registerObject("container", "9.0.0", "expressInstall.swf");
  16. </script>
  17.  
  18.  
  19. <script type="text/javascript"> 
  20. jQuery (document).ready(function() {
  21. var $results = jQuery('#results');
  22. var $content = jQuery('#content');
  23. jQuery('<p>Computed height: ' + $content.height() + '</p>').appendTo($results); 
  24. jQuery('<p>Inner height: ' + $content.innerHeight() + '</p>').appendTo($results); 
  25. jQuery('<p>Outer height: ' + $content.outerHeight() + '</p>').appendTo($results); 
  26. jQuery('<p>Document outer height: ' + jQuery(document).outerHeight() + '</p>').appendTo($results);
  27. jQuery('<p>Document inner height: ' + jQuery(document).innerHeight() + '</p>').appendTo($results);
  28. jQuery('<p>Window outer height: ' + jQuery(window).outerHeight() + '</p>').appendTo($results);
  29. jQuery('<p>Window inner height: ' + jQuery(window).innerHeight() + '</p>').appendTo($results);
  30. });
  31.  
  32. </script>
  33.  
  34.  
  35.  
  36. <script type='text/javascript'> 
  37.  
  38. function getTheStyle()
  39. {  
  40.  
  41. var elem = document.getElementById("content");
  42.  
  43. var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
  44.  
  45.     document.getElementById("output").innerHTML = theCSSprop;
  46.     document.getElementById("container").style.height = theCSSprop;
  47.  
  48.    }  
  49.  
  50.  
  51. function getTheNext()
  52. {  
  53.  
  54. var elem2 = document.getElementById("container");
  55. var theCSSprop2 = window.getComputedStyle(elem2,null).getPropertyValue("height");
  56.  
  57.     document.getElementById("change_2").innerHTML = theCSSprop2; 
  58.    }  
  59.  
  60.  
  61. </script>
  62.  
  63.  
  64.  
  65. <style type="text/css"> 
  66. <!-- 
  67.  
  68.  body  {
  69.     font: 12px Verdana, Arial, Helvetica, sans-serif;
  70.     background-image: url(images/body-bg.png);
  71.     background-repeat: repeat;
  72.     padding: 0px;
  73.     margin: 0px;
  74.  
  75. }
  76.  
  77.  
  78. .bgrounddiv {
  79.    margin-left: 1%;
  80.    margin-right: 1%;
  81.    border: 1px solid #FF0000;
  82.    height: 563px;
  83.  
  84. }
  85.  
  86. .bgrounddiv #container {
  87.     padding: 0px;
  88.     margin: 0px;
  89.     width: 964px;
  90.     height: 563px;
  91.     position: relative;
  92.     left: 0px;
  93.     top: 0px;
  94.     border: 1px solid #009900;
  95. }
  96.  
  97. #content {
  98.     padding: 0px;
  99.     margin: 0px;
  100.     position: absolute;
  101.     left: 0px;
  102.     top: 0px;
  103.     z-index: 500;
  104.     width: 984px;
  105.     border: 1px solid #666666;
  106.     overflow: visible;
  107. }
  108.  
  109. #output{  
  110. background-color: #cccccc;
  111.    position: absolute;  
  112.    left:     520px;  
  113.    top:      150px;  
  114.    height:   50px;
  115.    width: 150px;
  116.    color:#000000;
  117.    z-index: 1000;
  118.  } 
  119.  
  120.  
  121.  #change_2{  
  122.    background-color: #cccccc;
  123.    position: absolute;  
  124.    left:     310px;  
  125.    top:      150px;  
  126.    height:   50px;
  127.    width: 150px;
  128.    color:#000000;
  129.    z-index: 1000;
  130.  } 
  131.  
  132.  
  133.   #changebutton{  
  134.    background-color: #cccccc;
  135.    position: absolute;  
  136.    left: 55px;  
  137.    top: 220px;  
  138.    height: 30px;
  139.    width: 150px;
  140.    color:#000000;
  141.    z-index: 1000;
  142.  } 
  143.  
  144.  
  145.   #results{  
  146.    background-color: #cccccc;
  147.    position: absolute;  
  148.    left: 37px;  
  149.    top: 250px;  
  150.    height: 200px;
  151.    width: 200px;
  152.    color:#000000;
  153.    z-index: 1000;
  154.  } 
  155.  
  156.  
  157.  
  158. --> 
  159. </style>
  160. </head>
  161.  
  162. <body onload="getTheStyle()">
  163. <div id="changebutton">
  164.   <button onclick="getTheNext()">Check</button>
  165. </div>
  166. <div id="output"></div> 
  167. <div id="change_2"></div> 
  168.  
  169.  
  170.  
  171. <div class="bgrounddiv" align="center">
  172.             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="964" height="100%" id="container" name="Redesign_background-7" align="middle">
  173.                 <param name="movie" value="Redesign_background-7.swf" />
  174.                 <param name="scale" value="noscale" />
  175.                 <param name="wmode" value="transparent" />
  176.                 <!--[if !IE]>-->
  177.                 <object type="application/x-shockwave-flash" data="Redesign_background-7.swf" width="964" height="100%" align="middle">
  178.                     <param name="scale" value="noscale" />
  179.                     <param name="wmode" value="transparent" />
  180.                 <!--<![endif]-->
  181.                     <a href="http://www.adobe.com/go/getflashplayer">
  182.                         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  183.                     </a>
  184.                 <!--[if !IE]>-->
  185.                 </object>
  186.                 <!--<![endif]-->
  187.             </object>
  188.  
  189.             <div id="content">
  190.  
  191.  
  192.             <div id="results"></div>
  193. <!--<p>Hello</p>
  194. <p>Hello</p>-->
  195. <p>Hello</p>
  196. <p>Hello</p>
  197. <p>Hello</p>
  198. <p>Hello</p>
  199. <p>Hello</p>
  200. <p>Hello</p>
  201. <p>Hello</p>
  202. <p>Hello</p>
  203. <p>Hello</p>
  204. <p>Hello</p>
  205. <p>Hello</p>
  206. <p>Hello</p>
  207. <p>Hello</p>
  208. <p>Hello</p>
  209. <p>Hello</p>
  210. <p>Hello</p>
  211. <p>Hello</p>
  212. <p>Hello</p>
  213. <p>Hello</p>
  214. <p>Hello</p>
  215. <p>Hello</p>
  216. <p>Hello</p>
  217. <p>Hello</p>
  218. <p>Hello</p>
  219. <p>Hello</p>
  220. <p>Hello</p>
  221. <p>Hello</p>
  222. <p>Hello</p>
  223. <p>Hello</p>
  224. <p>Hello</p>
  225. <p>Hello</p>
  226. <p>Hello</p>
  227. <p>Hello</p>
  228. <p>Hello</p>
  229. <p>Hello</p>
  230. <p>Hello</p>
  231. <p>Hello</p>
  232. <p>Hello</p>
  233. <p>Hello</p>
  234. <p>Hello</p>
  235.  
  236.             </div>
  237.  
  238. </div>
  239.  
  240. </body>
  241. </html>
  242.  

标签: Javascript

添加新评论