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>
Related
I am embedding an video in a parent website where the iframe is a bit longer than the div.
PLease refer to the image below:
If we consider the iframe as the filled portion, and div as the non filled portion, we can see that the iframe is exceeded the div and also the iframe outside the div is not even visible. Can any one suggest a iframe css change so that i can apply to it? I cant change the div as it is not controlled by me (a third paty website to embed my videos) and also i can not apply javascript to the iframe for the same reason. I just can apply css to adjust the size of the iframe.
iframe code below:
<iframe style="width: 500px; height: 100%;" title="test" src="/my/src/video" ></iframe>
i have tried to change the width:100%, but the issue exists. Can anyone please suggest.
Try
<iframe width="100%" style="height: 100%" title="test" src="/my/src/video" > </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();
Title says it all. I've tried everything, but the contents inside the iframe is consistently reporting the height of the iframe itself.
I've even added a javascript function in the html embedded in the iframe that does the following:
alert($(document).height());
Consistently it shows the height as being 150px, which just so happens to be the size of the iframe on initial load. I think the problem is that the iframe has an object tag displaying a pdf. Visually the pdf is obviously taller than the iframe, so I would expect the document height to be set accordingly, but it isn't.
Why is this happening, and how in the world do I get the actual height of the contents? Under what circumstances would this behavior ever be wanted?
Ultimately, what I'm trying to do is print the PDF with a header. I'm calling a print function in the iframe that calls window.print(). What I'm finding is that the print length will be correct for the PDF (print preview will show 3 pages), but the actual display is only showing the iframe. In other words, the first page of the print preview will show the iframe, but the 2nd and 3rd page will be blank because the iframe isn't that tall, only the embedded PDF is.
My approach was to make the iframe the full height necessary, print, then reset the height to what it needs to be normally. But the document height in the iframe is consistently being reported as the height of the iframe itself.
I'm using Chrome to test.
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.
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.