首先，我向所有阅读本文的人致歉。我遇到过相当多的 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 添加了一些特殊功能，即用于创建实际 map 对象的函数。这在 Chrome 中工作得很好，当我直接在浏览器选项卡中加载页面时，它在 Firefox 中也工作得很好。但是，当我按预期加载它时，在内联框架内的 SugarCRM 页面中，我在 JS 控制台中收到错误“L.insert 函数名称未定义”。如果我只刷新 iframe，而不重新加载整个 SugarCRM 页面，那么 map 就会按预期显示。我现在正在通过捕获异常并在发生异常时强制页面重新加载来解决此问题，但我真的很想知道为什么会发生这种情况。我重写了 map Controller ，因此所有使用 L 的函数都包含在 $(document).ready() 函数中(使用 jQuery)，并尝试将传单脚本标记放在页面正文的顶部，其中它应该加载，但仍然没有运气。
最佳答案
您的问题是在父页面上使用$(document).ready。
HTML 解析器完成对父级的解析后，它将立即运行。但随后它会到达 iframe 内部，并取决于已加载的 iframe 内的各种脚本，而此时它们很可能还没有加载。基本上，这是顶级页面的 HTTP 响应与子帧中脚本的 HTTP 响应之间的竞争。
正确的方法是从 onload 运行初始化，或者至少从 DOMContentLoaded(这是 $(document).ready Hook 的部分)在子进程上触发的点运行初始化。
关于Javascript 在 Firefox 中加载不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14840504/