发表新帖
发表新帖

Set iframe content height to auto resize dynamically

后端 未结
关注
2 1453
[愿得一人]
[愿得一人] 2020-12-12 16:22

I was myself searching for a simple solution to change the height of an iframe with the content in it.

It seems like the rules are that you can\'t get the height of

2条回答
  • 悲&欢浪女
    悲&欢浪女 (楼主)
    2020-12-12 16:41

    In the iframe: So that means you have to add some code in the iframe page. Simply add this script to your code IN THE IFRAME:

    In the holding page: In the page holding the iframe (in my case with ID="myiframe") add a small javascript:

    What happens now is that when the iframe is loaded it triggers a javascript in the parent window, which in this case is the page holding the iframe.

    To that JavaScript function it sends how many pixels its (iframe) height is.

    The parent window takes the number, adds 32 to it to avoid scrollbars, and sets the iframe height to the new number.

    That's it, nothing else is needed.

    But if you like to know some more small tricks keep on reading...

    DYNAMIC HEIGHT IN THE IFRAME? If you like me like to toggle content the iframe height will change (without the page reloading and triggering the onload). I usually add a very simple toggle script I found online:

    to that script just add:

    How you use the above script is easy:

    toggle height?

    For those that like to just cut and paste and go from there here is the two pages. In my case I had them in the same folder, but it should work cross domain too (I think...)

    Complete holding page code:

    



THE IFRAME HOLDER

    Complete iframe code: (this iframe named "theiframe.htm")

    



IFRAME CONTENT




toggle height?
    

text
    
text
    
text
    
text
    
text
    
text
    
text
    
text
    
THE END

    Demo

    0 讨论(0)
 看不清?
提交回复
热议问题