How to dynamically resize iFrame in Firefox? - javascript

I used the solution stated on this page to resize the iFrame depending on the content:
Resizing an iframe based on content
And it works perfectly, except in Firefox. In Firefox, the other content is cut-off but once you keep on refreshing the page, the browser will slowly reveal the rest of the content. I saw someone replied that this is the solution to the problem:
Use jQuery to get the body height in
framed.html (FF issue, body kept
growing): var height =
$(document.body).height();
However, I don't know where to put that line of code. Do I insert it somewhere within the 3 snippets of scripts on the original solution? If so, where do I put it?

In www.bar.net/framed.html:
Use jQuery to get the body height in framed.html (FF issue, body kept growing):
change following code
// What's the page height?
var height = document.body.scrollHeight;
with
var height = $(document.body).height();

I already solved it. In case somebody else might be encountering the same problem, I used the code on the web page below which is slightly different from the link I gave above:
http://solidgone.org/Set-IFRAME-height-based-on-size-of-remotely-loaded-content

Related

Iframe cause document height to be equal to the window/viewport height on IOS devices (chrome & safari)

I'm trying to embed a website that I don't have control on inside my website.
The issue as the title mentioned I'm facing an infinite scrolling within the iframe. If I try to open the original website it's working. Does anyone know why this happens?
Check this https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/ site to see the expected result.
while if you try to load it in an iframe it won't render correctly.
Code:
<iframe src="https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/"></iframe>
Updats:
After debugging that page I found there's a strange behavior, which is the document height is equal to the window/view port height, this is the reason of this issue. What might cause a behaviour like this (document height == window height), I cannot find any part of code that modify the window height using API like resizeto or other stuff.
Notes:
The size of the loaded website is about 20MB.
It opens correctly on Andorid devices.
For Iphone if a scrolling animation forked, then my website crashed completely.
I'm running into the exact same problem. Will post an answer once I figure it out. So far none of the posted solutions I've found have worked (probably because I'm an amateur when it comes to CSS).
EDIT (x-post/repost):
Okay, so the answer that I found is that if you set scrolling=no for your iframe, then the bug will go away. Unfortunately the project I'm working on needs to have a scrolling iframe, so that's sort of a problem for me, but I hope this solution helps!
var iFrame = document.getElementById("iFrame");
iFrame.scrolling = "no";

iframe automatic height sizing not works well with IE

I have a little problem. On my aspx page I have an iframe which contains grids, tables, etc and they always change their height obviously. The previous developer team solved the problem, that they set the height attribute of the iframe to constant 3500px. It's not so elegant way so I added a JS code, that automatically checks the content and adjust the iframe height.
I got the JS script from here:
iframe Auto Adjust Height as content changes
The issue is that, this js code works well in Chrome and Firefox and almost everytime in IE. Sometimes I got an error message in IE that says:
"unable to get property 'nodename' of undefined or null reference jquery" or "Invalid argument". From this time somehow the function inside the setInterval will never run again and that's why the iframe height will never be adjusted. I made some modification and this height checking function is called from body onload event. Theoretically this js script will run when the whole dom structure is loaded. Firefox and Chrome is Ok, and 8 times from 10 IE also works.
Can somebody help me? Is there any solution you can suggest me? Thanks a lot.
Execute your code within to ensure that it executes when the full page has been constructed:
$(document).ready(function(e) {
// .. iframe resize here
});
Sporadic failures like this on page load are almost always caused by executing JavaScript before the page is loaded and the DOM is ready.

Dynamic iframe not loaded occasionally in Firefox

I have some JavaScript code that dynamically injects an iframe in a given HTML page. Unfortunately, in Firefox, and only in Firefox, although the iframe is created from time to time the relevant URL isn't loaded into it.
I know it wasn't loaded because the relevant URL doesn't appear in the Firebug Net tab, and when I inspect the iframe I don't see any expected HTML code in there (when the iframe is on the same domain as the outlying page). I don't see any JavaScript or network errors either.
Here's a code snippet, I've checked all the relevant variables are correct:
var iframe = document.createElement("iframe");
iframe.width = options["w"];
iframe.height = options["h"];
iframe.scrolling = "no";
iframe.marginWidth = 0;
iframe.marginHeight = 0;
iframe.frameBorder = 0;
iframe.style.borderWidth = 0;
if (node.childNodes.length > 0)
node.insertBefore(iframe, node.childNodes[0]);
else
node.appendChild(iframe);
iframe.contentWindow.location = iframeSrc + "?" + querystring;
Here's an example URL that is set for the iframe (the issue also recreates when the URL points to an external server, had to omit the 'http://' at the beginning otherwise I couldn't post the question):
127.0.0.1:8000/widget/iframe/index.html?style=slide-top-to-bottom&culture_code=en_us&c=26&sc=1324&title=Top%20News&caption=Top%20Stories&order=relevance&count=20&w=250&h=300&timestamp=true&scrollbar=false&theme=ui-lightness&className=8815455464592103&referrer=http%3A%2F%2F127.0.0.1%3A8000%2Fwidget%2Fbuilder%2Findex.html
Doing some research on the web, I found this unfixed Firefox bug which seems related to this issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=279048
After reading the bug, I tried several solutions none of which solved the issue:
Setting iframe.src instead of iframe.contentWindow.location
Adding a random parameter to the querystring
Adding the '#' symbol with a random number at the end of the URL
Giving the iframe a random name
Does anyone have a workaround for this annoying Firefox bug? Or is the issue I'm describing unrelated to the bug and has a different solution?
What happens if you add this to the bottom of your script?
iframe.contentWindow.location.reload(true);
Perhaps it will stop the need to reload in FF.
EDIT
Fixed the example
Solved the issue, I was looking in the wrong place. The HTML file where this dynamic iframe was loaded had an empty iframe tag that was removed from the DOM, after which the dynamic iframe was injected instead.
Apparently Firefox cached the last URL for this iframe, and loaded it immediately as the external page loaded. I know because I saw the relevant HTML file being loaded twice in the Firebug Net tab rather than once upon the injection.
After I got rid of this empty iframe tag and relied only on the injected iframe, everything started to work well and the issue didn't reproduce anymore. I guess Firefox didn't like handling this scenario, some kind of bug maybe?
Thanks anyway for helping me out, it gave me the inspiration for the right solution :)

Why wont this js code work in Chrome and Safari?

I have an iframe on my index.html and this iframe is dynamic.
on my index.html I have a form, which when submitted, shows the results inside the iframe.
The problem is the Iframes height also has to be dynamic for the website to look "clean".
So in the Iframes php page, I have this code:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
And in the index.html (which is the parent in this case) I have this function:
function resize_iframe(new_height){
byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}
The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.
I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...
Any ideas?
UPDATE:
I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.
But I must click back in the browser for it to work...
SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here
I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"
Sometimes javascript does not work as expected when the page has validation errors.
First try validating your markup (HTML).
If validating does not work, try using jQuery.
jQuery is cross-browser compatible; you should get the exact same result on every browser.

How do I prevent a swf from refreshing when an iframe is resized?

I am resizing an iframe, and when I do that in Firefox, the content gets refreshed.
I have a swf that extends, and in Firefox when the iframe extends to accommodate the swf, the swf appears in its normal position.
In IE this doesn't happen.
Anyone know how to prevent the refresh from happening in Firefox?
Thanks
Edit:
Ok I think the page is not being refreshed just the swf please check this out at:
http://antoniocs.org/iframe/index_.html
You can see that when the re-dimensioning takes place there is a quick "flash", in Firefox 3 and the swf returns to its initial state (not expanded), this does not happen in IE.
The code is all client side so you can view it all if you look at the source of the pages.
Antonio, I'm afraid that the problem is in Firefox it self. When Gecko detects a change to the width of an iFrame, it repaints the page and causes that "refresh." There's no way that I know of to change this behavior, short of using a different technique.
I confirmed that the problem exists in other Gecko-based browsers as well (specifically Camino and Flock). I was not able to duplicate it in WebKit-based browsers (Chrome and Safari).
It seems to be that either setting position: absolute; or .cssText will refresh the frame.
The solution is to add style="position: absolute;" to your <iframe> and set your css like this:
this.mrec_div_idObj.style.left = ((offsetLeftIframe) - (dimX - disX)) + "px";
this.mrec_div_idObj.style.top = (offsetTopDiv - disY) + "px";
this.mrec_div_idObj.style.zIndex = 99999999;
this.mrec_div_idObj.style.margin = 0;
this.mrec_div_idObj.style.padding = 0;
I've tested this and it works in Firefox 3.
There is no onresize code.
It's simple! I have an iframe with width 300 and height 250 and when I change them to 500 and 400 firefox refreshes the content and I want to prevent that.
Here is a page where you can see the code -> http://antoniocs.org/iframe/index_.html
The code to re size the iframe runs after 3 seconds and you can see the the swf, if it was extended, appears in it's initial (not extended) form.
To extend the swf just hover the mouse over it.
In ie there is no refresh in the iframe.

Categories

Resources