Question

我有一个使用OpenLayers，Extjs和GeoExt的应用程序。我的应用程序运行正常，但我需要将它放在另一页的IFrame内。执行此操作时，我的工具栏在 Internet Explorer 中变得无响应。

原因是 Ext.QuickTips.init（）; 。注释掉这一行，一切正常 - 除了快速提示：=）

但为什么会引起问题呢？是因为我使用它错了，放错了还是因为它不喜欢 Internet Explorer 和IFrames？

链接：

IFrame 页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <iframe height="660" src="http://www.gis34.dk/doctype.html" width="660">
          <p>This browser does not support <i>frames</i>.</p>
        </iframe>
    </body>
</html>

申请页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" language="javascript">
        var map;
        var mapPanel;
        var mainViewport;
        var toolbarItems = [];
    </script>
    <link href="/Libraries/Ext/resources/css/ext-all.css" type="text/css"
    rel="stylesheet" />
    <link href="/Libraries/GeoExt/resources/css/geoext-all-debug.css" type="text/css"
    rel="stylesheet" />
    <link href="/CSS/Extjs.css" type="text/css" rel="stylesheet" />
    <link href="/CSS/OpenLayers.css" type="text/css" rel="stylesheet" />
    <link href="/CSS/Poseidon.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <script src="/Libraries/OpenLayers/OpenLayers.js" type="text/javascript"></script>
    <script src="/Libraries/Ext/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
    <script src="/Libraries/Ext/ext-all-debug.js" type="text/javascript"></script>
    <script src="/Libraries/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"
    type="text/javascript"></script>
    <div id="map">
    </div>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.QuickTips.init(); // Uncomment this line!

            Ext.BLANK_IMAGE_URL = '/Libraries/Ext/resources/images/default/s.gif';

            var layer = new OpenLayers.Layer.OSM.Mapnik('OpenStreetMap Mapnik', {
                sphericalMercator: true
            }, {
                isBaseLayer: true
            });

            var mapOptions = {
                projection: 'EPSG:900913',
                units: 'm',
                maxExtent: new OpenLayers.Bounds(1390414.0280576, 7490505.7050394, 1406198.2743956, 7501990.3685372),
                minResolution: '0.125',
                maxResolution: '1000',
                restrictedExtent: new OpenLayers.Bounds(1390414.0280576, 7490505.7050394, 1406198.2743956, 7501990.3685372),
                controls: [
                    ]
            };
            map = new OpenLayers.Map('', mapOptions);

            var Navigation = new OpenLayers.Control.Navigation();
            action = new GeoExt.Action({
                control: new OpenLayers.Control.ZoomBox({
                    out: false
                }),
                map: map,
                tooltip: "Zoom in",
                iconCls: 'icon-zoom-in',
                toggleGroup: 'mapTools',
                group: 'mapTools'
            });
            toolbarItems.push(action);
            action = new GeoExt.Action({
                control: new OpenLayers.Control.ZoomBox({
                    out: true
                }),
                map: map,
                tooltip: "Zoom out",
                iconCls: 'icon-zoom-out',
                toggleGroup: 'mapTools',
                group: 'mapTools'
            });
            toolbarItems.push(action);

            action = new GeoExt.Action({
                control: new OpenLayers.Control.ZoomToMaxExtent(),
                map: map,
                iconCls: 'icon-zoom-max-extent',
                tooltip: 'Zoom helt ud'
            });
            toolbarItems.push(action);
            map.addControl(Navigation);
            map.addLayer(layer);

            mapPanel = new GeoExt.MapPanel({
                border: true,
                id: 'mapPanel',
                region: "center",
                map: map,
                tbar: toolbarItems
            });
            mainViewport = new Ext.Viewport({
                layout: "fit",
                hideBorders: true,
                items: {
                    layout: "border",
                    deferredRender: false,
                    items: [
                        mapPanel
                        ]
                }
            });
        });
    </script>
</body>
</html>

Answer 1

我遇到过类似的问题，IE在iframe中表现得很糟糕。

似乎这个问题与揭开元素有关。

通过拖放管理器在文档的mousedown上禁用Quicktips，然后在mouseup上启用。启用时，它会取消屏蔽元素并尝试删除一个类，这似乎会导致它。老实说，我不知道为什么。

无论如何，在unmask（）方法中，尝试修改代码，以便只有在现有掩码已经存在的情况下才调用removeClass。

unmask : function(){ var me = this, dom = me.dom, mask = data(dom, 'mask'), maskMsg = data(dom, 'maskMsg'), hasMask;



if(mask){
    if(maskMsg){
        maskMsg.remove();
            data(dom, 'maskMsg', undefined);
    }
    mask.remove();
        data(dom, 'mask', undefined);
        hasMask = true;
}
if(hasMask){
        me.removeClass([XMASKED, XMASKEDRELATIVE]);
    }
}

if(mask){ if(maskMsg){ maskMsg.remove(); data(dom, 'maskMsg', undefined); } mask.remove(); data(dom, 'mask', undefined); hasMask = true; } if(hasMask){ me.removeClass([XMASKED, XMASKEDRELATIVE]); } }

Extjs工具提示，IFrame和IE =＆gt;问题

1 个答案: