本文介绍了加载新内容时调整iFrame的高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个包含在我的HTML中的iFrame,并且在页面加载时可用。首次加载页面时,iFrame没有内容/ src。我正在使用jQuery将内容动态插入到iFrame中。当用户单击我的页面上的链接时,iFrame的内容会更新。所有这些都为我工作。然而,当我加载新内容时,我正在努力调整iFrame的高度。我在StackOverflow上尝试了几个解决方案,但没有成功。这里是我的iFrame代码:



< iframe id =myframewidth =100%frameborder =0>< / iframe>



这是我的jQuery,它改变了我的iFrame中的HTML:



emailOpened.find('#myframe')。contents()。find('body')。html(email.body);



这适用于我。我只需要我的iFrame根据被注入的内容的高度来调整它的高度。



更新:

更新:

更新:

>

以下是我的新HTML:

 < iframe id =myframe width =100%frameborder =0> 
< body onload =parent.resizeIframe(document.body.scrollHeight);>
< / iframe>


解决方案

如果您需要移动支持并允许(用户)滚动对于iframe,请查看 a - 在iOS和Android上修复不同问题的解决方案。



我还必须支持移动设备,并在经过几个小时的研究和测试后最终使用它。我还使用提供的消息通道来回发送消息到内部文档。


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.

这篇关于加载新内容时调整iFrame的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-29 01:57
查看更多