動的iframeの高さ

問題があります。私はそれの中に中央のdivとiframeで構成されるテンプレートに取り組んでいます。 divは、iframeの内容に応じて動的にサイズを変更する必要があります。結果を出さずに、ここで見つけた他のソリューションを試しました。動的iframeの高さ

<div id="site_content" style="position:relative; width:445px; height:500px;"> 

    <iframe id="mainframe" name="mainframe" onload="parent.adjustIFrameHeight();" FRAMEBORDER="0" scrolling="no" style="overflow:hidden; border:none;" src="http://www.letsapp.it/alecianetti/" width="445" height="600"></iframe> 

</div>

が、私はdiv要素（#site_content）を希望のiframeのコンテンツの変化に動的にサイズを変更：私は、次のHTMLコードを使用しています。私はこの機能を試してみましたが、私は、JSを使用して非常に専門家ではないんだと同様の（私は今、それらを勉強しています;））ので、それはあなたのアイデアを与えるために

onload="parent.adjustIFrameHeight();"

便利か、正しいかどうかはわかりません結果、私はレプリケートしているテンプレートである ThemeForest Wave CVのデモサイトにリンクしています。

誰でも手伝ってもらえますか？

出典

2012-04-11 Fox Mulder

[1] [http://stackoverflow.com/questions/6671275/iframe-height-adjust-not-working][1] をこのリンクを見てくださいます。http： //stackoverflow.com/questions/6671275/iframe-height-adjust-not-working –

こんにちはフィリップと答えてくれてありがとう。しかし、それは全く機能しません。その他の提案？ –

すべての注意：現代のブラウザでは、ドメイン間の問題についてセキュリティチェックが行われます。エラーを取り除くために、JavaScriptで 'document.domain'と同じ値を定義してください。 – Raptor

ちょうど試しました！

<script type="text/javascript"> 
     function setIframeHeight(iframeName) { 
      //var iframeWin = window.frames[iframeName]; 
      var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null; 
      if (iframeEl) { 
      iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous 
      //var docHt = getDocHeight(iframeWin.document); 
      // need to add to height to be sure it will all show 
      var h = alertSize(); 
      var new_h = (h-148); 
      iframeEl.style.height = new_h + "px"; 
      //alertSize(); 
      } 
     } 

     function alertSize() { 
      var myHeight = 0; 
      if(typeof(window.innerWidth) == 'number') { 
      //Non-IE 
      myHeight = window.innerHeight; 
      } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
      //IE 6+ in 'standards compliant mode' 
      myHeight = document.documentElement.clientHeight; 
      } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
      //IE 4 compatible 
      myHeight = document.body.clientHeight; 
      } 
      //window.alert('Height = ' + myHeight); 
      return myHeight; 
     } 
    </script> 

</head> 
<body onload="setIframeHeight('ifr');"> 
<center> 
    <iframe id="ifr" src="yourdomain!" onload="parent.adjustIFrameHeight();" width="850px" scrolling="no" ></iframe> 
</center> 
</body> 
</html>

出典

2012-04-11 10:59:58

Philippさんありがとうございます。未知の型エラー：オブジェクト[オブジェクトDOMWindow]にメソッドがありません 'adjustIFrameHeight' –

申し訳ありませんが、同じエラーが発生しました。しかし、スクリプトは基本的に動作しますか？ –

はい、「parent.adjustIFrameHeight（）;」を変更しました。 "parent.setIFrameHeight（）;"それはうまくいく。問題は、高さが背の高いdivに固定されていることです（これは800pxに固定されています）。 –

答えて

関連する問題