Member Avatar for lucky1981_iway

Hi,

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 .

Thanks

  • 2 Contributors
  • 4 Replies
  • 231 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by lucky1981_iway

Dani AI

Generated

Yes — the parent iframe element can be resized without reloading the nested iframe. The important rule is to change the iframe element's CSS or class in the parent document rather than changing the nested frame's src or replacing the element (those will reload the inner document). 's nested-DOM idea is fine when all documents share the same origin; for cross-origin scenarios, use a postMessage handshake instead.

When same-origin access is available the parent can measure the inner document and set the outer iframe height. Example (parent page):

function resizeOuterFrame(frameId) {
  var f = document.getElementById(frameId);
  try {
    var doc = f.contentWindow.document;
    var h = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
    f.style.height = h + 'px';
  } catch (e) {
    // access denied for cross-origin
  }
}

For cross-origin frames, have the inner document send its height to the parent using postMessage, and have the parent set the iframe height on receipt. Example pattern:

// inside inner frame
function reportHeight() {
  var h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
  parent.postMessage({ type: 'resize', height: h }, 'https://parent-origin.example'); // restrict origin
}

// in parent
window.addEventListener('message', function(ev) {
  if (!ev.data || ev.data.type !== 'resize') return;
  // optionally verify ev.origin
  document.getElementById('frameA').style.height = ev.data.height + 'px';
});

Troubleshooting tips: percentage heights need an explicit height on ancestor elements; toggling a class on the iframe (instead of inline styles) helps with transitions; avoid removing/recreating the iframe element (that reloads content); and throttle/debounce frequent resize events to avoid layout thrash. provided a useful same-origin example; the postMessage approach above makes the solution safe and reliable when origins differ. reported the original issue was resolved after trying a similar approach.

Recommended Answers

All 4 Replies

Member Avatar for essential

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";
Member Avatar for essential

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.

Member Avatar for essential

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"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<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%; }

-->
</style>
<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";
   }
};

// -->
</script>
</head>
<body>
<!-- IFRAME -->
<div>main</div>
<div>
<iframe id="frameA" name="frameA" src="frameA.html" scrolling="no"></iframe>
</div>
<div><button id="btn" name="btn" onclick="resizeFrame();">Resize FrameA</button></div>
</body>
</html>
Member Avatar for lucky1981_iway

Thanks for your help. I 'm able to sort out my problem after seeing your example.

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.