1

首先，我向任何阅读本文的人道歉。我遇到了相当多的 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 function name here is not defined”。如果我只刷新 iframe 而不重新加载整个 SugarCRM 页面，则地图会按预期显示。我现在正在通过捕获异常并在它发生时强制页面重新加载来解决这个问题，但我真的很想知道为什么会发生这种情况。一世'

4

2 回答 2

1

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

这将在 HTML 解析器完成对父级的解析后立即运行。但是它会到达 iframe 内部，并且取决于 iframe 内的各种脚本已经加载，它们可能还没有到那个时候。基本上，这是顶级页面的 HTTP 响应和子框架中脚本的 HTTP 响应之间的竞争。

正确的方法是从 onload 或至少从 DOMContentLoaded （这是$(document).ready挂钩的）在子节点上触发的点运行初始化。

于 2013-02-13T04:09:32.070 回答
0

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

于 2013-02-12T22:48:23.133 回答