In - Nạp trang bằng frame - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Trình duyệt » Cửa sổ » Nạp trang bằng frame
URL: https://www.javascriptbank.com/setting-height-of-iframe-to-display-all-its-content-index.html

Nạp trang bằng frame © JavaScriptBank.com Hiệu ứng tạo ra hai frame trên trang web, nội dung của frame thứ hai sẽ được nạp tùy thuộc vào liên kết mà người dùng sẽ nhấn.

CSS

<style type="text/css">body { font: 14px verdana, arial, helvetica, sans-serif }h1   { font-size:18px; margin-bottom:1.4em }a:link    { color:#33c }a:visited { color:#339 }div#lnks    { float:left; width:100px; margin:20px 0 0 0 }div#lnks ul { margin:0; padding:0; list-style:none }div#lnks ul li { margin:0 0 .5em 0 }div.iframe     { margin-left:130px;  }iframe#ifrm {   border-top:1px dashed #666; border-right:1px dashed #666;  padding-right:1em;  }div#footer {   margin:2em 0 0 110px; padding:10px 0 0 34px;  width:440px;  border-top:1px dashed #666  }</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->

JavaScript

<script type="text/javascript">function getDocHeight(doc) {  var docHt = 0, sh, oh;  if (doc.height) docHt = doc.height;  else if (doc.body) {    if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;    if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;    if (sh && oh) docHt = Math.max(sh, oh);  }  return docHt;}function setIframeHeight(iframeName) {  var iframeWin = window.frames[iframeName];  var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;  if ( iframeEl && iframeWin ) {    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    if (docHt) iframeEl.style.height = docHt + 30 + "px";  }}function loadIframe(iframeName, url) {  if ( window.frames[iframeName] ) {    window.frames[iframeName].location = url;       return false;  }  else return true;}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->

HTML

<div id="lnks">  <ul>  <li><a href="height1.html" onclick="return loadIframe('ifrm', this.href)">Page 1</a> </li>  <li><a href="height2.html" onclick="return loadIframe('ifrm', this.href)">Page 2</a></li>  <li><a href="height3.html" onclick="return loadIframe('ifrm', this.href)">Page 3</a></li>  <li>&nbsp;</li>  </ul></div><div class="iframe">  <iframe name="ifrm" id="ifrm" src="height1.html" width="400" height="600" scrolling="no" frameborder="0" style="height: 416px;">  Sorry, your browser doesn't support iframes.</iframe></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->

Files

http://javascriptbank.com/javascript/browser/Setting_Height_of_Iframe_to_Display_All_Its_Content/height1.htmlhttp://javascriptbank.com/javascript/browser/Setting_Height_of_Iframe_to_Display_All_Its_Content/height2.htmlhttp://javascriptbank.com/javascript/browser/Setting_Height_of_Iframe_to_Display_All_Its_Content/height3.html