Adjust height of iframe when new content is loaded - javascript

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 Stack Overflow 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.
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.
how to properly display an iFrame in mobile safari
https://encrypted.google.com/search?q=iframe+resize+ios+issue
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.
function resizeIframe() {
var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Related

Add Scrolling to Iframe From Iframe Code

Let's say I have an iframe hosted on www.my-iframe.com. And let's say that my iframe is embedded in a page on a different domain using:
<iframe src="http://www.my-iframe.com" scrolling="no" height="500" width="100%"></iframe>
Please note that the iframe tag has the attribute scrolling="no".
I only have access to edit the iframe code, not the pages on which my iframe is embedded. This makes it so I cannot change the scrolling attribute of the iframe html tag or the overflow: hidden; css styling of the iframe.
Is there a way that I can force a scroll bar to appear when necessary from within the iframe code?
Any help/advice is appreciated!
What you could try is maybe using a JS library to simulate a a scrollbar, there are plenty of them on the internet.
Here are a few examples (neither unordered nor necessarily the best ones): iScrollJS
fullPage.js
jQuery scrollbars

PDF inside iFrame not working on iOS

I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js

iframe not working with safari/firefox

I'm trying to figure out why my images aren't displaying properly within my iframe. Every browser works fine with the exception of Firefox and Safari. I can still click the links within the iframe and open up the corresponding page, but the images just won't display. I am using the instansive instagram widget as my iframe content (instansive.com). Their code looks like this - >
<!-- INSTANSIVE WIDGET --><script src="//instansive.com/widget/js/instansive.js"></script><iframe src="//instansive.com/widgets/427ad0d8ae95cfc36f19bb10c960dbf03bbef870.html" id="instansive_427ad0d8ae" name="instansive_427ad0d8ae" scrolling="no" allowtransparency="true" class="instansive-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
I'm not sure as to what I am doing wrong, or why it isn't displaying correctly with these two particular browsers.
There is nothing to do with iframe. Try giving the image path as /test/image.jpg instead of full path. This may work

change iframe url with javascript . firefox issue

I have a main page that loads a default link in an iframe http://mypage.com/myurl. Having it in a blog, I want to dynamically change that default link inside the iframe, for every post page. I load the default link like that:
<iframe width='1000' height='500' name='iframename' frameborder='0'
src='http:/mypage.com/myurl'></iframe>
(works on all browsers) and i change dynamically the link inside the iframe by putting this code in every post page:
<script type="text/javascript">
document.iframename.location = "http://mypage.com/mynewurl";
</script>
It works fine on chrome and ie, but it does not work on firefox!!
Any ideas or work around?
Here a simplified example www.tinyurl.com/9l7zt2n see the difference with firefox it loads the default link in the iframe. ie and chrome can change with the added javascript.
If it helps to test it on the blog www.tinyurl.com/9axhquh u can see it working on chrome and ie, if u click on any post title or "read more" to load the post's page, the iframe on top changes accordingly
Any ideas or work around?
document.iframename.location is probably not supported crossbrowser.
try:
<iframe width='1000' height='500' id='iframeid' frameborder='0' src='http:/mypage.com/myurl'></iframe>
<script type="text/javascript">
document.getElementById('iframeid').src = "http://mypage.com/mynewurl";
</script>
this means:
accessing an element by name through a document.elementName syntax is not supported.
an iframe element has no property called location. location is a property of window. You can access the window of an iframe by using using contentWindow.
I've written a short test here http://jsfiddle.net/FyNW9/. Run it in different browsers.

Flash always appears on top in google chrome

I'm building a popup window. I use an iframe to cover backgroud content then show a div over this iframe to show popup content.
In the background page I have a YouTube video embedded, code sample:
<iframe width="560" height="315" src="http://www.youtube.com/embed/2XY3AvVgDns" frameborder="0" allowfullscreen></iframe>
My problem: The YouTube video always shows on top and covers my popup window.
Note: My code works fine on IE and FireFox, but not GoogleChrome
How can I let my popup window show on top in GoogleChrome?
Change the url to:
http://www.youtube.com/embed/2XY3AvVgDns?wmode=transparent
Notice the ?wmode=transparent parameter.
Setting visibility style property of the <iframe> element to hidden should help.
Can you modify your iframe to object. If yes, try using
<param wmode="transparent"></param>
Hopefully it should work.

Categories