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.
Related
Lets say that I have an iframe that renders some html that I provide. The iframe has a fixed height. It renders what it can inside it's height and shows scrollbar for the rest.
My question is, how can I fetch the html contents of the iframe that are visible in the viewport using javascript.
I only want to get the contents that are visible, not the ones that are hidden under the scroll.
i.e. I only want to fetch the marked contents as a javascript document
Have you tried the scrolling="no"?
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
I'm trying to use the jQuery Lazy Load plugin, which is working fine on my static HTML page. However, when I try to load that same page within an iframe that has a fixed height, the images do not lazy load, they load immediately.
Here is how the iframe is being called:
<iframe src="file.html" frameborder="0" height="2500" scrolling="no" width="100%" onload="resizeFrame()" style="height: 2500px;"></iframe>
I'm not familiar enough with how the DOM sees an iframe, but could it be that the plugin see the iframe height and assumes the image is inside the current viewport?
Is there a simple way to work around this issue? My goal is to have the images within the iframe load as you scroll down the parent page.
Thanks!
Edit: I should clarify that the JavaScript lazyload call is already happening inside file.html and works fine if I load file.html on it's own. It doesn't work when I load file.html as an iframe on another page.
The lazy load plugin is using the jQuery .height() method to determine if a particular element (or image in this case) is inside the viewport or not by comparing this height to the elements top offset. Since your iframe has a fixed height of 2500px, your "viewport" .height() is going to also be 2500px. This is why it is loading all of the images at once. It does not consider the height of your parent DOM, only the iframe.
Your only option is to have the user scroll inside the iframe if you want the images to lazy load.
Try to add the lazy load event to iframe Images too:
$("img.lazy").lazyload();
$( "iframe" ).children( 'img' ).lazyload();
So I have a form that I built with Google Docs because it seemed easier than going from scratch. I've gotten this to work by copy-pasting the code from google's page to one on my domain.
I managed to get it to auto-size its height with this lovely little script I found here: http://www.frontpagewebmaster.com/m-89000/tm.htm (this is not another thread about HOW to dynamically resize an iframe)
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
and the iframe on MY displayed page:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
But now when I hit submit, the confirmation or error page opens in the _parent window (might be _top) - instead of in the iframe (_self, which is supposed to be the default?). target="" is depreciated and doesn't work. This also happens with ANY link inside the iframe.
I've tried a couple different resize scripts, but I don't know enough to figure it out? Or the code doesn't actually work for my purposes? I'm not sure... Here's what I have working: http://fiendconsulting.com/60minutedesign/form-embed.html
What I need: Something that resizes the iframe content on first load of the Parent page and which opens all links in their _self frame/page/whatever.
What I don't care about: Resizing the iframe to fit the content of subsequent pages. If I click a link inside the iframe, I don't need the iframe to resize to whatever page I just went to.
I'm a self-taught programmer and I have some interesting gaps in my knowledge. I also just started learning JS and PHP and am at the Read, Comment and Cannibalize stage. It's better to assume I don't know, and it would help me a LOT if you told me where to Put the code (which document and where in the document). :)
I'm unsure of what you are trying to do because the links you provided do not seem to work; however, I believe your problem might be because of your resize function.
Your function:
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
You take the element 'contentDiv', you take the HTML of your 'iframe' and then you set the same to your content div. This results in your 'iframe' not existing any more.
For example:
let's say my content div had this:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
My iframe has only 1 link: Example Link
After your function, your contentDiv now looks like:
<div class="right" id="contentDIV">
Example Link
</div>
you have effectively removed your iframe and put the contents of the iframe (the link) into your main div. Now if you click on the element, it'll automatically open on the same page - i.e. the 'parent' but there is no parent anymore!
So going forward, you should not be replacing the content; instead you should be modifying the height/width of the iframe. Have a look at:
Adjust width height of iframe to fit with content in it
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 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.