2013-02-12 10 views
1

Во-первых, приношу свои извинения всем, кто это читает. Я столкнулся с множеством проблем JS, и это самый трудноразрешимый из всех, что я когда-либо видел. Я сделаю все возможное, чтобы дать четкое описание, но мне, возможно, придется его пересмотреть.Неправильная загрузка JavaScript в firefox

У меня есть следующие загрузки страницы в встроенную рамку в SugarCRM:

<head> 
<link rel="stylesheet" href="style/style.css" /> 
</head> 
<body> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/index_controller.js"></script> 
<table class="form_text" style="width: 100%; height: 100%;" cellpadding="5"> 
    <tr> 
     <td><iframe id="map_frame" 
       style="width: 100%; height: 100%; overflow-y: hidden; border: solid 1px #DDDDDD" 
       scrolling="no" 
       src="map.php?<?php 
        foreach ($_REQUEST as $key => $value) { 
         echo $key . "=" . $value . "&"; 
        }?>"></iframe> 
     </td> 
     ... 
     </td> 
    </tr> 
</table> 
</div> 
<script type="text/javascript"> 
    parent.$("iframe").each(function(iel, el) { 
      if(el.contentWindow === window) { 
       var to_remove = $(el).parent().prev(); 
       $(to_remove).remove(); 
       $(el).css("border", "none"); 
      } 
    }); 
    $(document).ready(function(){ 
     updateMap(); 
    }); 
</script> 
</body> 

И в IFRAME в этой странице, у меня есть это:

<head> 
<link rel="stylesheet" href="style/style.css" /> 
<!--[if lte IE 8]> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" /> 
<!--[endif]--> 
<link rel="stylesheet" 
href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" /> 
<script src="js/jquery-1.9.1.js"></script> 
</head> 
<body> 
<script type="text/javascript" src="../include/DashletContainer/Containers/DCMenu.js"> </script> 
<script type="text/javascript" src="js/arrayList.js"></script> 
<script type="text/javascript" src="js/custom_map_controls.js"></script> 
<div id="map" style="height: 100%"></div> 
<form action="../index.php" method="post" name="DetailView" 
id="formDetailView"> 
<input type="hidden" name="module" value=""> <input type="hidden" 
    name="record" value=""> <input type="hidden" name="return_action"> <input 
    type="hidden" name="return_module"> <input type="hidden" 
    name="return_id"> <input type="hidden" name="module_tab"> <input 
    type="hidden" name="isDuplicate" value="false"> <input type="hidden" 
    name="offset" value="1"> <input type="hidden" name="action" 
    value="EditView"> <input type="hidden" name="sugar_body_only"> <input 
    type="hidden" name="prospect_id" value=""> 
</form> 
<script type="text/javascript" src="js/map_icons.js"></script> 
<script type="text/javascript" src="js/map_controller.js"></script> 
<script src="js/leaflet-0.4.5.js"></script> 
</body> 

leaflet-0.4.5.js сценарий, при оценке, создает глобально доступный объект, известный как L, который предоставляет доступ ко всем функциям карты отображения листов. В моем map_controller.js я добавляю некоторые специальные функции к L.Map, функции для создания реальных объектов карты. Это отлично работает в Chrome, и он отлично работает в Firefox, когда я загружаю страницу непосредственно на вкладке браузера. Но когда я загружаю его по назначению, на странице SugarCRM внутри встроенного фрейма, я получаю сообщение об ошибке «имя функции L.insert здесь не определено» в консоли JS. Если я обновляю только iframe без перезагрузки всей страницы SugarCRM, тогда карта появится так, как ожидалось. Теперь я обдумываю это, перехватывая исключение и заставляя страницу перезагружаться, когда это происходит, но я действительно хотел бы знать, почему это происходит в первую очередь. Я переписал контроллер карты, поэтому все функции, которые используют L, содержатся внутри функции $ (document) .ready() (используя jQuery для этого) и попытались помещать тег scriptlet в верхней части тела на странице, где он должен загружаться, и до сих пор не повезло.

ответ

1

Ваша проблема заключается в использовании $(document).ready на родительском .

Это будет работать, как только парсер HTML будет обработан родителем. Но затем он достигает внутри iframe и зависит от различных скриптов внутри iframe, которые были загружены, что, возможно, еще не на тот момент. Это гонка между HTTP-ответом для страницы верхнего уровня и ответами HTTP для скриптов в подкадре, в основном.

Правильный способ сделать это - запустить инициализацию из onload или, по крайней мере, с точки, где DOMContentLoaded (что то, что $(document).ready зацепляет), уволил ребенка.

0

Вы должны использовать какое-то управление зависимостями, например LABjs или RequireJS, чтобы убедиться, что ваши скрипты загружены и выполнены в правильном порядке.