{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 你好瞎i 的问题《Adjust Height of iFrame When New Content is Loaded》','https://www.manongdao.com/q-1089093.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me. However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on StackOverflow but with no success. Here is my iFrame code:
<iframe id="myframe" width="100%" frameborder="0"></iframe>
Here is my jQuery that changes the HTML inside of my iFrame:
emailOpened.find('#myframe').contents().find('body').html(email.body);
This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.
Any help is appreciated!
UPDATE:
Here is my new HTML:
<iframe id="myframe" width="100%" frameborder="0">
<body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>
If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.
I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.
Call this function directly after the html has been changed.