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 として知られるグローバルに使用可能なオブジェクトを作成します。これにより、リーフレット マッピング フレームワークのすべての機能にアクセスできます。私の map_controller.js では、実際のマップ オブジェクトを作成する関数である L.Map にいくつかの特別な機能を追加します。これは Chrome では問題なく動作し、ブラウザー タブでページを直接読み込むと Firefox でも問題なく動作します。しかし、意図したとおりにロードすると、インライン フレーム内の SugarCRM ページで、JS コンソールに「L.insert function name here is not defined」というエラーが表示されます。SugarCRM ページ全体をリロードせずに iframe だけを更新すると、マップは期待どおりに表示されます。私は現在、例外をキャッチし、発生時にページを強制的にリロードすることでこれを回避していますが、そもそもなぜこれが起こっているのか知りたいです. 私'

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 に答える