Steuergröße der iframe-Größenänderung bei Klick

Question

Dieser Code wird von einer Drittanbieter-Site generiert, um eine Karte einzubetten. Wenn auf die Karte geklickt wird, ändert sich die Größe des iframe, um das gesamte Browser-Ansichtsfenster zu füllen, und das Kopfzeilenmenü auf meiner Site ist verschwunden. Sobald dies geschieht, gibt es keine Möglichkeit, das Kopfzeilenmenü auf meiner Site erneut anzuzeigen.

Gibt es trotzdem einen Hinweis darauf, dass der gesamte Ansichts-Port von der Karte verbraucht wird? Ich möchte, dass das Kopfmenü meiner Website sichtbar bleibt.

ich mit dieser Codezeile

oMap.style.height = h + "px" gearbeitet haben;

..., wissen aber nicht genug Fortschritte var h = window.innerHeight; Sätze

<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

Die Linie h auf die Höhe des inner window (in Pixeln), die gleich zu machen. Dann setzt oMap.style.height = h + "px"; den iframe gleich dieser Höhe.

Aus dem bereitgestellten Code ist nicht ersichtlich, warum die Kopfzeile verschwindet. Vielmehr würde ich die iframe erwartet abgeschnitten werden, da sie unter dem Header mit document.body.appendChild(oMap);

angefügt Wenn Sie alles auf dem Bildschirm passen wollen, versuchen Sie die Höhe Ihres Kopfes subtrahiert, wenn für oMap die Höheneinstellung. Wenn Ihre Kopfzeile beispielsweise 200 Pixel groß ist, verwenden Sie var h = window.innerHeight - 200;.

Versuchen Sie auch, die Linie document.body.style.overflow = "hidden"; zu entfernen. Dies verhindert, dass das Element body Scrollbalken erstellt, wenn Elemente zu groß sind, um zu passen, und möglicherweise dafür verantwortlich sind, Ihren Header zu verbergen.

Answer 2

Die einfachste Art, wie ich das Problem demonstrieren http://www.onlinehtmleditor.net/

den obigen Code einfügen, klicken Sie auf der Karte verwendet wird, verschwindet der Header.

Dann bearbeiten, so dass: oMap.style.height = h - 40;

Die Kopfzeile verschwindet nicht mehr.

Aber auf meiner Live-Site hat dies ein anderes ernstes Kartenanzeigeproblem verursacht. Bevor ich fortfahren kann, muss ich ein möglicherweise damit verbundenes Problem lösen. Also ist diese für jetzt gehalten.