この質問は生の Javascript と JQuery のどちらかまたは両方に関連していると思いますが、ArcGIS Javascript API マップ クラスにも関連していると思います。私の問題は IE9 の問題です。アプリは Chrome と FF で正常に動作します。(ESRI の JS フォーラムでもこの Q に質問しましたが、今のところ回答がありません...)
マップをクリックすると独自の div でマップが開く Web アプリがあります (window.open または iframes を使用しません)。アプリを初めてロードした後、ベースマップは期待どおりに開きます (最初は、マップは他のレイヤーのないベースマップのみです)...しかし、マップ div を閉じてから再度開くと、ベースマップが約 1 秒間表示されます。次に消えます...しかし、背景色とズームボタンは残ります...
マップは HTML で次のように設定されます。
<div class="map-content">
<div class="map-close" style="display: none;"><a href="#">Close</a> </div><!--buttons--->
<div class="map-fullscreen" style="display: none;"><a href="#">Fullscreen</a></div>
<div style='width:100%; height:100%'><object type="text/html" name ="mapPage" style='width:100%;
height:100%' data='mapPage.html'>
</object></div>
</div>
init JS では、ベースマップが TiledMapServiceLayer として追加されます。
..それ以上のコードはありません! 私が言ったように、これはすべてFFとChromeで正常に動作します.....
HTML で遭遇したすべての IE タグまたは条件を試しましたが、この問題を解決したものはありません... meta http-equiv="X-UA-Compatible" content="IE=7,IE=9 " /> ヘッダーとスクリプトで type="text/javascript" src="JavaScript/modernizr-2.5.3.js">
そこにもいる……。
メインのインデックス ページにも次のタグがあります。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt- ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><html class="no-js"><![endif]-->
（* ps私はJquery Mobileも使用しています..）
これは、マップを開くボタンの JS です (ほとんどの場合、サイズ変更の要素がたくさんあります:)
mapTrigger.click(function(){
$FirstConstrainerWidth = $('.firstConstrainer').outerWidth();
console.log("locsizeConstWidth: " + $SizeConstrainerWidth + " locfirstConstrainer: " + $FirstConstrainerWidth);
if ($SizeConstrainerWidth > $FirstConstrainerWidth)
{
$SizeConstrainerWidth=$FirstConstrainerWidth;
}
// scroll to top to make sure header is visible
$('html, body').animate({scrollTop:0}, 'fast');
//animate the containers height to the height of the slideshow
mapContainer.animate({
"height" : $('#sizeConstrainer').outerHeight() - $('#bg').outerHeight() - $('#footer').outerHeight(), // TODO:adjust the height of the map on window resize
"width" : $SizeConstrainerWidth,
"top" : $('#bg').outerHeight(),
"left" : $SizeConstrainerLeft,
"bottom" : $('#footer').outerHeight()
}, 300, function() {
// When the animation is complete
// hide the loading indicator
// Fade in the controls
$(".map-close, .map-fullscreen").fadeIn("slow");
});
});
クリックでマップを閉じる機能は、これと比較的似ています...
また、このコードをマップ ページの html に追加しました。これは、IE バージョンが JQuery Mobile を正しく解釈するのに役立つと思われます。
<script type="text/javascript">
//run this script after jQuery loads, but before jQuery Mobile loads
//customize jQuery Mobile to let IE7+ in (Mobile IE)
$(document).bind("mobileinit", function() {
$.extend($.mobile, {
//extend gradeA qualifier to include IE7+
gradeA : function() {
//IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
var ie = ( function() {
var v = 3, div = document.createElement('div'), a = div.all || [];
while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><br><![endif]-->', a[0]);
return v > 4 ? v : !v;
}());
//must either support media queries or be IE7+
return $.support.mediaquery || (ie && ie >= 7);
}
});
});
</script>
...これまでのところ何も機能していません..再び ap は FF と Chrome で期待どおりに機能しますが、IE でこの点滅するマップは私を夢中にさせます (他にもいくつかの小さな css の問題がありますが、これが最大の問題です)。 ..もちろん、以前のバージョンの IE で表示すると、私のアプリの外観と動作はさらに奇妙になります。
助けて？ありがとう！// ジェイソン