JS based webapp basemap hidden in IE9

问题

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

标签

javascript

internet-explorer

jquery-mobile

parent-child

arcgis-server