Iframe Fixer v1.0-

essential 0 Tallied Votes 204 Views Share

This script is capable of handling multiple iframes inside your page. Which allow you to specify fixed Width/Height with your iframes' to ensure layout stability in your page and also it comes with an auto-fit feature.

<<<INSTRUCTION>>>

&#8212; The iframeFixer.js must be included in your iframe page including all pages that will be loaded in the iframe using the: <script type="text/javascript" src="iframeFixer.js"></script> .

NOTE : Only documents that includes' these iframeFixer.js will take its effect, outer-source (or document from the other source ) will not be handled.

&#8212; If you still have any question or comment's, please feel free to notify me by posting those comments below.

&#8212; If you need an iframe (x)HTML document sample with preloaded CSS template, simply send me some pm to get your request.

/******************************
Developed By DANIuser : essential -

 * Created : May 23rd, 2009 -
 * Title : Iframe Fixer v1.0 -
 * This notice MUST stay intact for use - 
 * http://www.daniweb.com/forums/member383844.html
******************************/
var $load;
var $tagNames;
var $iframe;
var $script, script;
var $tags;
var $fixed, $auto;
var $fwidth, $fheight
var $iframeId;
////////////////////////////////////////
/////////CONFIGURATION////////
////////////////////////////////////////

/* The $fwidth and $fheight can be referred as ( n-px, n-em, n-%, or auto ) were n is the number value ~ 
   And will only work if the $fixed sized value is set to true. //*/ESSENTIAL
////////////////////////////////////////
////////////////////////////////////////
   $iframeId = "iframes" // You may specify your iframe id if you only have 1 iframe element inside your page, otherwise ignore this -

   $fwidth = "100%"; // You may specify iframe width if $fixed size is set to true.

   $fheight = "1000px"; // You may specify iframe height if $fixed size is set to true; 

   $fixed = true; // Set to false if you want to auto-fit your iframe elements'.

////////////////////////////////////////
//////DO NOT ALTER THE////////////////LINES BELOW/////////// 
////////////////////////////////////////
   $auto = Boolean();
   $auto = (( $fixed ) ? false : true );
   if ( !$fixed ) {
      $fwidth = null;
      $fheight = null;
    }
   $tagNames = Boolean( document.getElementsByTagName ); 
$tags = Object.prototype.$tags = function( isTag ) {
   if ( $tagNames ) {
      return document.getElementsByTagName( isTag );
   } else if ( document.all && !document.getElementByI ) {
      return document.all.tags( isTag );
   } return alert("Unsupported JavaScript Features!\nPlease upgrade your browse.");
};
   $iframe = function( ref, $width, $height, iframeId ) {
      $function = "\nvar testFunc, iHeight, iWidth;\n";
      $function += "var myFrame, iframeId;\n";
      $function += "testFunc = function() {\n";
      $function += "iframeId = \u0022" + $iframeId + "\u0022\n";
      if( $auto ) {
      $function += "iHeight = $tags('body')[ 0 ].scrollHeight + ( \u0022px\u0022 );\n";
      $function += "iWidth = ( \u0022100%\u0022 );\n";
      } else {
      $function += "iHeight = ( \"" + (( typeof $height === "number" ) ? Number( $height ) : String( $height )) + "\" );\n";
      $function += "iWidth = ( \"" + (( typeof $width === "number" ) ? Number( $width ) : String( $width )) + "\" );\n"; 
      }
      $function += "if ( window.top.frames.length <= 1 ) {\n"; 
      $function += "myFrame = window.top.$tags('iframe')[ iframeId ];\n";
      $function += "if (( !myFrame.style.height ) || ( !myFrame.style.width )) {\n";
      $function += "myFrame.style.height = iHeight;\n";
      $function += "myFrame.style.width = iWidth;\n";
      $function += "}\n";
      $function += "else {\n"; 
      $function += " myFrame.setAttribute( 'style', 'height : ' + iHeight + '; width : ' + iWidth );\n";
      $function += "}\n";
$function += "}\n";
      $function += "else {\n";
      $function += "for ( var x = 0; x < window.top.frames.length; x++ ) {\n";
      $function += "myFrame = window.top.$tags(\u0022iframe\u0022);\n"
      $function += "if (( !myFrame[ x ].style.height ) || ( !myFrame[ x ].style.width )) {\n"
      $function += "myFrame[ x ].style.height = iHeight;\n";
      $function += "myFrame[ x ].style.width = iWidth;\n";
      $function += "}\n";
      $function += "else {\n";
      $function += "myFrame[ x ].setAttribute( 'style', 'height : ' + iHeight + '; width : ' + iWidth + ';' );\n";
      $function += "}\n";
      $function += "}\n}\n};\n";
      $function += "$load( testFunc );\n";
      script = document.createTextNode( $function );
      $script = document.createElement("script");
      $script.type = "text/javascript";
      $script.appendChild( script );
   if ( $tagNames ) {      
         if ( self.frames.length !== 0 ) {
         return false;
         }  else {         
      $tags("head")[ ref ].appendChild( $script );
        }
     } else {
     $tags("head")[ ref ].insertAdjacentElement("afterEnd", $script );
     }
  };

// Based on Simon Willison's addLoadEvent -->

// This is highly needed for multiple load events.
    
$load = function( myFunc ) {
   thisFunc = window.onload;
   if ( typeof window.onload !== "function" ) {
      window.onload = myFunc;
   } else {
      window.onload = function() {
         if ( thisFunc ) {
            thisFunc( );
         } myFunc( );
      };
   }
}; $load( $iframe( 0, $fwidth, $fheight ));
essential 84 Posting Shark Featured Poster

Refer on this template when you are using my iframe script above:

HTML sample document

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Iframe Page</title>
<meta name="author" content="DANI-USER : essential" />
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#main {
  margin : 0% auto;
  text-align : left;
  height : auto;
  overflow : hidden;
  width : 98%;
   }

div.tube {
  border : 1px solid #ccc;
  min-height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }

iframe {
  border : 1px solid #ccc;
  height : auto;
  display : block;
  margin : 0 auto;
  width : 100%; }

table {
   border : none;
   border-collapse : collapse;
   height : inherit;
   width : 99%;
   margin : 0 auto;
   text-align : center;
   }

tbody td { 
  padding : 1em 0 1em 0;
  border : none; }
/* ]]> */
</style>
<script type="text/javascript" src="./iframeFixer.js"></script>
</head>
<body>
<div id="main">
<div class="tube">
<table id="framed" frame="void" border="0" cellpadding="0" cellspacing="0" rules="none" summary="Resizing Iframe with JavaScript">
<tr>
<td style="background-color : #f0f0f0;">
<iframe id="iframes" name="iframes" src="iframe1.html" scrolling="no"></iframe></td>
</tr>
<tr>
<td style="background-color : #f0f0f0;">
<iframe id="iframes1" name="iframes1" src="iframe2.html" scrolling="no"></iframe></td>
</tr>
</table>
<p><a target="iframes1" href="http://www.google.com/">Google</a> <a target="iframes" href="http://www.daniweb.com/">DaniWEB IT Community</a></p>
</div>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.