基于JS的webapp底图隐藏在IE9中

时间:2013-04-09 17:05:34

标签: javascript internet-explorer jquery-mobile parent-child arcgis-server

我认为这个问题与/或原始Javascript和JQuery有关..但我认为它也与ArcGIS Javascript API地图类有关。我的问题是IE9问题;该应用程序在Chrome和FF中运行良好。 (我也在ESRIs JS论坛上问了这个Q,但到目前为止还没有答案......)

我有一个网络应用,在地图上点击(不使用window.open或iframes),地图在其自己的div中打开。第一次加载应用程序后,底图按预期打开(首先地图只是没有其他图层的底图)...但是当我关闭地图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中正常工作.....

我已经尝试过每个IE标签或HTML中的条件,但是没有人解决过这个问题... 我有                            meta http-equiv =“X-UA-Compatible”content =“IE = 7,IE = 9”/&gt; 在标题和                         script type =“text / javascript”src =“JavaScript / modernizr-2.5.3.js”&gt;

也在那里......

我的主索引页面中也有这些标记:

<!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查看时,我的应用程序看起来甚至更奇怪。

帮助?谢谢! //杰森

0 个答案:

没有答案