Question

此代码由第三方网站生成，用于嵌入地图。单击地图后，iframe会调整大小以填充整个浏览器视口，并且我网站上的标题菜单已消失。一旦发生这种情况，就无法再次查看我网站上的标题菜单。

无论如何都要停止地图使用的整个视口？我希望我的网站标题菜单保持可见。

我一直在使用这行代码

oMap.style.height = h +“px”;

......但不知道取得进展

<p>My Header Menu</p>

    <script type="text/javascript">
        var vURL      = "http://maps.gsi.go.jp";
        var vURL_Site = "/?postmessage=1#5/35.362222/138.731389/&base=std&ls=std&disp=1&vs=c1j0l0u0f0";
        var oMap      = null;        
        function Init(){
            oMap = document.createElement("iframe");
            oMap.style.display = "none";
            oMap.src = vURL + vURL_Site;
            oMap.onload = function(){
                var oContent   = oMap.contentWindow;
                var ClientMode = {
                  baseUrl     : null
                , location    : null
                , LayerJS     : null
                , sakuzuList  : null
                , queryString : null
                };

                ClientMode.sakuzuList = [{"fileName":"","visible":true,"features":[{"type":"Feature","properties":{"_markerType":"DivIcon","_html":"JAPAN"},"geometry":{"type":"Point","coordinates":[141.8115234375,37.47485808497102]}}]}];


                oContent.postMessage(ClientMode, vURL);

                EvtResize();
            };

            document.body.appendChild(oMap);
        };

        function EvtResize(){
            var w = window.innerWidth;
            var h = window.innerHeight;
            if(oMap != null){
                oMap.style.width   = w + "px";
                oMap.style.height  = h + "px";
                if(oMap.style.display == "none"){
                    oMap.style.display = "block";
                }
            }
        };

        window.onload   = function(){
            document.body.style.margin   = "0px";
            document.body.style.padding  = "0px";
            document.body.style.overflow = "hidden";

            Init();
        }
        window.onresize = EvtResize;
    </script>

Answer 1

var h = window.innerHeight;行设置h等于inner window的高度（以像素为单位）。然后oMap.style.height = h + "px";将iframe设置为等于该高度。

从提供的代码中，为什么它导致标题消失并不明显。相反，我希望iframe被切断，因为它附加在标题下面document.body.appendChild(oMap);

如果您希望屏幕上的所有内容都适合，请在设置oMap的高度时尝试减去标题的高度。例如，如果您的标题是200px高，请使用var h = window.innerHeight - 200;。

另外，请尝试删除行document.body.style.overflow = "hidden";。这可以防止body元素在元素太大而无法容纳时创建滚动条，并且可能负责隐藏标题。

Answer 2

我能证明问题的最简单方法是使用http://www.onlinehtmleditor.net/

粘贴上面的代码，点击地图，标题消失。

然后进行编辑，以便：oMap.style.height = h - 40;

标题不再消失。

然而，在我的实际网站上，这导致了另一个严重的地图显示问题。在我继续之前，我需要解决一个潜在的相关问题。所以这个暂时搁置。

iframe的控件大小会在单击时调整大小

2 个答案: