问题
I think this question is related to either/or raw Javascript and JQuery..but I think it is also related to the ArcGIS Javascript API map class..my problem is an IE9 issue; the app works fine in Chrome and FF. (I have also asked this Q on ESRIs JS forum, but no answer so far...)
I have a web app where a map opens up in its own div on a map click (not using window.open or iframes) . After loading the app for the first time, the basemap opens as expected (at first the map is only the basemap with no other layers)...but when I close the map div, then open it again, the basemap appears for about 1 second, then vanishes...but the background color, and zoom button, remain...
the map is set up in HTML this way:
<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>
In the init JS, the basemap is added as a TiledMapServiceLayer.
..there's not a lot more code to it! as I said, all this works normally in FF and Chrome.....
I have tried every IE tag or conditional in the HTML that I have come across, but none have solved this issue... I have meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> in the header and script type="text/javascript" src="JavaScript/modernizr-2.5.3.js">
is in there as well....
I also have these tags in my main index page:
<!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 I am using Jquery Mobile as well..)
This is the JS for the button that opens the map (mostly lots of resizing stuff:)
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");
});
});
My function to close the map with a click is relatively similar to this...
I also added this code to the map page html, which I believe is supposed to help IE versions correctly interpret 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>
...nothing has worked so far..again the ap works as expected in FF and Chrome but this blinking map in IE is driving me nuts (there are a few other smaller css problems as well, but this is the biggest one)...of course, my app looks and acts even weirder when viewed with earlier version of IE.
help?thanks! // Jason
来源：https://stackoverflow.com/questions/15908114/js-based-webapp-basemap-hidden-in-ie9