1

this is the index.html code..

<body><iframe name="sample" src="first.html" width="100%" height="100%" frameborder="0"  id="sample" /></body>

first.html code is...

<body>
<div style="width:100%; height: 1900px; background: yellow;"></div>
 <br>
 <a href="second.html">second</a>
</body>

second.html code is

    <body><div style="width:100%; height: 1100px; background: blue;"></div>
<br>
<a href="first.html">first</a></body>

Now what i want is to make the index page render the whole first.html and second.html in full-height. somehow the iframe height must adjust to the corresponding height of webpage it is holding. How to do this?

Anoop Chandran
  • 13
  • 6

1 Answers1

0

Dealing with iframe dimensions can be a bit of a pain. This isn't exactly an answer, but hopefully it will point you in the right direction.

Are you the author (or do you have access to the author) of the iframe? If so a solution like this should work.

I'd also give this library (or one of its 58 forks) a look over for some inspiration. In my experience, the post-message API has been useful when working with iFrames, which is what the library above is build on top of.

Hope that helps!

Community
  • 1
  • 1
Doug
  • 2,441
  • 2
  • 19
  • 22
  • the provided solution is not working..it is taking height 155px...iframe resizer implementation is very confusing... :( – Anoop Chandran Oct 28 '14 at 09:02
  • Try creating your own resizing events, simply using the resizer implementation as a guide. It doesn't solve the problem you are trying to solve. – Doug Oct 28 '14 at 09:28
  • If you're still having trouble, post a fiddle with the iFrame, and we can both take a look at it. – Doug Oct 28 '14 at 09:30
  • Posting messages between the windows is how I solved this problem in the past. It did not require a cross origin solution, though I think it can be used in that context as well: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage – Doug Oct 28 '14 at 09:31