In my webapplication I hide an iframe using jquery hide() function.
Surprisingly firefox reload the content of iframe when the iframe is hidden.
Is this a known problem? Is there a workaround?
I also tried to hide the iframe setting css style display to 'none'. Same result.
The script work as expected in opera.
I'm using firefox 3.5.1
Some say the solution might be in providing a different
id or name attribute for each IFRAME =
but it did not work in my Case (FF 3.6+)
Another possible solution is to make sure the iframe's content
is not taken from the browsers cache.
this can be done by concatenating a randomizing string to the the iframe's source URL, making sure the content will never come from the cache.
all in all, its a bug that should be fixed by the Mozilla team!..
Don't know about that bug, but one possible solution is to set height and width to 0px instead, maybe?
Related
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.
I'm trying to get iFrame sandboxing to work, and Firefox is giving me trouble.
<iframe src="" scrolling="no" sandbox=""></iframe>
I use jQuery to set the iFrame's src attribute to one of several different pages. But my target pages have JavaScript in them that makes them break out of my iFrame. I counter that with the sandbox attribute, which is supposed to prevent JavaScript from running inside the iFrame. This works great in Chrome and Internet Explorer, but in Firefox as soon as I load the target page into the iFrame it takes over the whole window.
Firefox's documentation says it fully supports the sandbox attribute. Am I doing something wrong? Installing NoScript and telling my browser not to run JavaScript from the target site makes everything work fine, but obviously I don't want Firefox users to have to install an addon before my site will work.
If you are manipulating or setting the sandbox attribute after the iframe is in the DOM, it will completely ignore the setting. You must set it before the iframe element is added to the DOM.
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
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.
My layout breaks if I change the window size in IE7/AOL, so I added a simple javascript function that fires on window.onresize, but no matter how I change the location I get problems.
It was suggested I post a link and here it is: http://sinaesthesia.co.uk/
I already use PHP to detect browser and include an IE7-only inline stylesheet (and for mobile browsers), and my page looks nearly identical to the way it does in FF, Opera, Chrome, Safari and IE8, but when I change the window size, some things go wonky, and come back into line if you refresh. Any advice is welcome :)
I advise you to fix the real problem: your layout breaking when the browser is resized. Reloading the page onresize is definitely not a best-practice.
If you post a link to your page, you might get some good insight into the sources of your problems.
I think that fixing layout issues like yours with javascript is not a good idea.
A better approach would be to detect what is broken. and add a conditional comment to include an IE only stylesheet.
You should fix the layout problems instead.
There is no way to refresh a page in the way you want to do it. On reload, everything will be redrawn, and the blinking/not blinking is dependent on the exact state of the users' browser.