I have a web page. In that there is a toggle button to show or hide advanced search options. Below that there is a "IFrame A"(Table).

IFrame A conatins "IFrame B" (Table Contents). Based on the toggle switch status, i want to update "IFrame A" size without refreshing the "IFrame B".

Is it possible to do so ? Can you give me some example or point to some tutorial .


7 Years
Discussion Span
Last Post by lucky1981_iway

Nest your frames using this format, this the same as with my last posted code:

document.getElementById("frameA").document.getElementById("frameB").document.getElementById("frameC").style.backgroundColor = "black";

You can target specific frames or frame element's using frame ids. Just apply different method's ( window.frames['frameA'].document.all.yourElem ) in your script to make it cross-platform.


Here's a more complex Demo.
First you will need to nest 2 documents using iframes. test.html (iframe)-->frameA.html (iframe)-->frameB.html and apply this codes in the test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
div { border : none; margin : 0 auto; padding : 1em; }

iframe {
  background-color: transparent;
  border : 2px solid #000;
  display : block;
  margin : 0 auto;
  height: auto;
  text-align : left;
  width : 98%; }

<script type="text/javascript">
var resizeFrame, frameA;
resizeFrame = function() {

frameA = (( document.getElementById ) ? parent.document.getElementById("frameA").contentWindow.document.getElementById("frameB") : (( window.frames ) ? window.frames["frameA"].frames["frameB"] : document.all.frameA.document.all.frameB ));
   try {
   frameA.setAttribute( "style", "background-color : #365d95; width : 50%; height : 200px;" ); 
   } catch( e ) {
   frameA.style.width = "50%";
   frameA.style.backgroundColor = "#365d95";

// -->
<!-- IFRAME -->
<iframe id="frameA" name="frameA" src="frameA.html" scrolling="no"></iframe>
<div><button id="btn" name="btn" onclick="resizeFrame();">Resize FrameA</button></div>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.