クリック時のiframeサイズの制御サイズ

Question

このコードは、サードパーティのサイトでマップを埋め込むために生成されています。地図がクリックされると、iframeはブラウザのビューポート全体を満たすようにサイズ変更され、私のサイトのヘッダーメニューはなくなります。それが起こると、私のサイトのヘッダメニューをもう一度見る方法はありません。

地図で消費されているビューポート全体を停止する方法はありますか。私は自分のサイトのヘッダーメニューを見えるようにしたい。

Iコード

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

inner window（ピクセル）の高さに等しいhを設定var h = window.innerHeight;ラインを作るのに十分なのか分かりません。その後、oMap.style.height = h + "px";はiframeをその高さに設定します。

提供されたコードから、ヘッダーが消える原因は明らかではありません。むしろ、ヘッダーの下に付いているようにiframeを切り捨てることをお勧めします。の高さを設定するときは、ヘッダーの高さを差し引いてみてください。たとえば、ヘッダーの高さが200ピクセルの場合は、var h = window.innerHeight - 200;を使用します。

また、document.body.style.overflow = "hidden";行を削除してみてください。これにより、要素が大きすぎてフィットできない場合にbody要素がスクロールバーを作成しないようになり、ヘッダーを非表示にする可能性があります。

Answer 2

Iの問題を示すことができる最も簡単な方法は、ヘッダが消え、地図をクリックして、上記のコードを貼り付けhttp://www.onlinehtmleditor.net/

を使用しています。

次に、次のように編集します。oMap.style.height = h-40;

ヘッダーが消えなくなりました。

しかし、これは私のライブサイトでは別の重大な地図表示の問題を引き起こしました。私が進める前に、潜在的に関連する問題を解決する必要があります。これは今のところ保留中です。