I have a cross browser iframe that is working minus one small detail. The initial frame load does not re-size all the way. So items are cut off at the bottom of the screen. It re-sizes perfectly if the frame is refreshed.
Is there a way to refresh an iframe once on the page load?
Example is here:
http://www.aans.org/aansmarketplace.aspx
goto multimedia products and select dvd. You will notice content cut off at the bottom of the screen...but if you reload the frame all of the content shows.
<iframe id="iframe" src="empty_script.php" />
<script>
$(function(){
$("#iframe").attr('src', 'your_Script.php');
});
</Script>
How are you resizing the iframe? If you have access to iframe containing page use onload event of iframe, calculate the inner document height and set it to iframe. This works perfectly fine in all browser.
Related
I have a html page that has a viewport meta tag.
I'm viewing the page on iPad and it displays with the right viewport.
If I open another page with no viewport tag in it which contains an iFrame that point to my page the viewport tag has no effect.
Is this the correct behaviour?
Is there a way to have the viewport tag working from within an iframe?
Thank you!
Because of security issues iframe content cannot "leak" onto the parent page, meta tags have to be in the original page code.
I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
If you are dealing with the problem in Javascript simply use this code:
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
or
<script language="javascript">
function totop() {
scroll(0,0);
}
</script>
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.
I am loading an aspx web page in an iframe within the same domain/protocol as the parent/container page. The content in the Iframe is sometimes of more height than the iframe itself. I do not want to display scroll bars on my Iframe.
I need to resize the height of the Iframe based on the wrapper 'div' tag inside the aspx page that the iframe will contain.
Below is the jquery i had written to achieve this:
$("#TB_window", window.parent.document).height($("body").height() + 50);
'TB_window' - the div in which the Iframe is contained.
'body' - the body element of the aspx in the iframe.
This script is attached to the iframe content. i am getting the TB_window element from the parent page.
while this works fine on Chrome, but the TB_window collapses in firefox.
I am really confused/lost on why that happens.
Can anyone offer any advice on how i can handle the situation better??
Your help will be highly appreciated
Thanks
You have to use manage some event on your iframe
<iframe id="iframe" src="xyz" onload="FrameLoad(this);"
onresize="FrameLoad(this);" scrolling="no" frameborder="0">
</iframe>
function FrameLoad(ctrl) {
var the_height = ctrl.contentWindow.document.body.scrollHeight;
$(ctrl).height(the_height)
}
also use for cross browser
document.domain = document.location.hostname;
in both parent page and child page
If the difference is not that big you can add
overflow:hidden
to the css class
this doesn't resize the window but could be what you're searching for.
Is it possible to scroll(0,0) to the top of the parent page when the user browses in an iframe? For example, we have an iframe that is the entire height of the page with search results. When you click the next page button in the iframe, the focus stays at the bottom of the page.
I'm not even sure if it's possible to detect this. The iframe src value doesn't actually change.
P.S. I don't know why this site must use an iframe, but IE6 is the standard browser so I didn't ask questions.
Actually, the onload event does appear to work when navigating within an iframe.
<iframe src="http://mysite.com" height="2392px" width="100%" name="searchFrame" onload="scroll(0,0);"></iframe>
As an alternative, you can have the iframe ask the parent frame to scroll to the top with
parent.scrollTo(0,0);
I haven't researched the official browser support for it, but it works in IE9, FF10, Chrome 17 and Safari 5.1.
<iframe onload="parent.location= 'http://mysite.com/page.html#nameofdivonthetopofpage';" ...
Its getting me crazy in FF. I tried the same page in Chrome and content appears instantly.
I have an iframe that is loading a chart from another page.
The problem is that the chart do not appears until I inspect the element and click on the edit element button. Once I add space after the src property in the html code (see below for better understanding) the graph will be displayed instantly.
Graph using is of jqPlot
Before
<iframe src="http://localhost:4501/mainpage/graph.aspx"></iframe>
After
<iframe src="http://localhost:4501/mainpage/graph.aspx" ></iframe>
Image here.
alt text http://img294.imageshack.us/img294/252/crazything.jpg
<iframe src="#" onload="this.src='http://localhost:4501/mainpage/graph.aspx'">No Ifrmae allowed</iframe>
i am not sure why it does that could be a something from your computer ... but give this a go.
btw if you get the "no iframe allowed" could be that your ff has disabled iframe. sience you have mentioned that it shows the frame but there is a loading problem... then do check on your firebug... on the NET tab "http://localhost:4501/mainpage/graph.aspx" has been loaded successfully.
Since you're loading them from the same domain, you can access that iframe's js and DOM.
Add some space or and empty <span> to the dom in the iframe window via javascript to force a redraw.
Have you tried to reload the frame manually (I mean, to see what happens)? (Right click it → This Frame → Reload Frame)