Question

首先，我向任何阅读此内容的人道歉。我遇到了相当数量的JS问题，这是我见过的最棘手的问题。我会尽力给出一个清晰的描述，但我可能要修改它。

我在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的全局可用对象，该对象可以访问所有Leaflet映射框架的函数。在我的map_controller.js中，我为L.Map添加了一些特殊功能，这是创建实际地图对象的功能。这在Chrome中运行良好，当我直接在浏览器选项卡中加载页面时，它在Firefox中运行良好。但是当我按照预期加载它时，在内联框架内的SugarCRM页面中，我在JS控制台中收到错误“此处没有定义L.insert函数名称”。如果我只刷新iframe而不重新加载整个SugarCRM页面，那么地图就会按预期显示。我现在通过捕获异常并强制页面在发生时重新加载来解决这个问题，但我真的很想知道为什么会发生这种情况。我重写了地图控制器，所以使用L的所有函数都包含在$（document）.ready（）函数中（使用jQuery），并尝试将传单脚本标记放在页面正文的顶部它应该加载，但仍然没有运气。

Answer 1

您的问题是在父页面上使用$(document).ready。

一旦HTML解析器解析完父节点，它就会运行。但它然后到达iframe内部并依赖于已经加载的iframe内的各种脚本，他们可能还没有到那时。这是顶层页面的HTTP响应和子帧中脚本的HTTP响应之间的竞争。基本上。

执行此操作的正确方法是从onload运行初始化，或者至少从DOMContentLoaded（这是$(document).ready挂钩进入）触发的点开始运行初始化。

Answer 2

您应该使用某种依赖关系管理，例如LABjs或RequireJS，以确保以正确的顺序加载和执行脚本。

在Firefox中Javascript加载不正确

2 个答案: