Using the David Bradshaw iFrame Resizer code for dynamic iframes.
Initially, it works and set's the appropriate height of the iframe to the content.
But when the user clicks a link to go to another page within the iframe, the height doesn't downsize if the content is less. If the content is more, it'll upsize just fine.
I've tried using the various attributes for heightCalculationMethod, all the same results. I look into the content of the iframe of the smaller pages and what I'm seeing is an html table(that doesn't have a defined height) then a huge gap underneath inside the body tag(which also doesn't have a defined height).
What am I missing here?
Here is my script..
<script>
iFrameResize({
log:true,
enablePublicMethod:true,
heightCalculationMethod:'lowestElement'
});
</script>
Is it possible to just reset the iframe height?
Quoted from https://github.com/davidjbradshaw/iframe-resizer
IFrame not downsizing
The most likely cause of this problem is having set the height of an
element to be 100% of the page somewhere in your CSS. This is normally
on the html or body elements, but it could be on any element in the
page. This can sometimes be got around by using the taggedElement
height calculation method and added a data-iframe-height attribute to
the element that you want to define the bottom position of the page.
You may find it useful to use position: relative on this element to
define a bottom margin or allow space for a floating footer.
Not having a valid HTML document type in the iFrame can also sometimes
prevent downsizing. At it's most simplest this can be the following.
Setting heightCalculationMethod to 'bodyScroll' helped me in a same case:
go from a page inside iframe with iframeResizer.contentWindow.min.js placed to another page without this script.
I use iFrame Resizer v3.5.8
Related
I'm using a different website(already active) into my webpage, but that website page is too big in height. So after restricting its height to 100vh (or some height). Scrolling down through the iframe is okay, but I need a floating 'scroll to top button' for iframe which will bring the iframe scroll to the top (NOT the parent window scroll).
I have used this code in .ts file of Angular, and it worked for the parent window scroll, but NOT for <iframe>
P.S - I'm using Angular 7
scrollToTop(){
window.scroll(0,0);
}
.html code
<button (click)="scrollToTop()">TOP</button>
Thank you in advance.
Update: I have tried the following suggested way
document.getElementById("myIframe").scroll(0,0);
I'm able to print the innerHtml, that means getElementById is working fine, the issue is with .scroll(0,0) Had tried .scrollTo(0,0) & .scrollBy(0,0) too but results the same
Just do the same but replace the window with the iframe element:
document.getElementById(<iFrameId>).scroll(0,0);
I have a parent page and inside that parent page, there is an iframe that is around half the size of the parent page.
The JavaScript in the iframed page is supposed to get the size of the iframed page and set the size of a text input, but both JavaScript's document.body.clientWidth and jQuery's $(document).width() are returning the parent page's width.
How do I get the width of the iframed page from scripts inside the iframe (that is, without having to send the iframe width from the parent page to the iframe page with querystrings)? They are cross-domain too.
simply use this -
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
The similar kind of work is done here stackoverflow.com/questions/7808729/… you can refer this if it works – Manoj Singh
Thank you, this is exactly what I wanted!
EDIT: Sorry, after a bit of testing, this doesn't work too well. In jsfiddle it works, but in my page, it only gives me the height accurately.
The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway:
Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE:
It would appear that this is not possible when using frames.
Have you tried pointer-events: none?
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
You are authoring both the host page, and the iFrame page.
You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
// This is the Bradshaw resizer script. Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script>
<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>
<div id="normal"style="width:100%;" >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>
<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline");
if(document.getElementById("home-page")!=null){
iframe.src = "https://the_embedded_site.com";
$(iframe).show();
$(iframe_padded).hide();
} else {
iframe_padded.src = "https://the_embedded_site.com";
$(iframe).hide();
$(iframe_padded).show();
}
// This starts dynamic resizing. Required iff you need dynamic resizing.
iFrameResize({log:true})
</script>
I think you missed:
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.
I'm using jQuery for pagination. When the content is loaded into the (#results) div, it shows up on the page but I do not see it in the source code.
I believe this is the cause of issues I am having with CSS and jQuery functions related to that (#results) div. The CSS doesn't see any content in the div so the height doesn't actually cover the content in the div.
$("#results").load('pagination.php?page=' + page + ' #results-tbl > *');
I'm loading the #results-tbl div from pagination.php into the #results div on the current page.
Is there a better way to be loading this? What am I doing wrong?
Like Phil said,
View source will only show source when the page initially loaded. Any alterations to the DOM / source after this point will not be reflected in normal browser view source.
In addition to browser inspecting tools like Firebug etc, you can use add-ons like web developer add-on.
With the CSS issues, have a look with firebug to see your IDs and classes are actually hooking up to the CSS properties you have in your CSS file. As long as they hook up any new elements added to the DOM should get styled when added.
With height of your parent element, if you don't set its height explicitly, adding any content via AJAX should cause the parent element to stretch vertically to fit its new contents.
I can see that this question has been asked several times, but none of the proposed solutions seem to work for the site I am building, so I am reopening the thread. I am attempting to size an iframe based on the height of it's content. Both the page that contains the iframe and it's source page exist on the same domain.
I have tried the proposed solutions in each of the following threads:
Resize iframe height according to content height in it
Resizing an iframe based on content
I believe that the solutions above are not working because of when the reference to body.clientHeight is made, the browser has not actually determined the height of the document.
Here is the code I am using:
var ifmBlue = document.getElementById("ifmBlue");
ifmBlue.onload = resizeIframe;
function resizeIframe()
{
var ifmBlue = document.getElementById("ifmBluePill");
var ifmDiv = ifmBlue.contentDocument.getElementById("main");
var height = ifmDiv.clientHeight;
ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height || 500) + 5 + 'px';
}
If I debug the script using fire debug, the client height of the iframe.contentDocument's main div is 0. Additionally, body.offsetHieght, & body.scrollHeight are 0. However, after the script is finished running, if I inspect the DOM of the HTML iframe element (using fire debug) I can see that the body's clientHeight is 456 and the inner div's clientHeight is 742. This leads me to believe that these values are not yet set when iframe.onload is fired. So, per one of the threads above, I moved the code into the body.onload event handler of the iframe's source page. This solution also did not work.
Any help you can provide is much appreciated.
Thanks,
CJ
DynamicDrive has such a script, which I think does what you're asking for.
There's also a newer version now.
2011 update:
I would strongly recommend using AJAX over something like this, especially considering that a dynamically resizing iframe only works across the same domain.
Even so, it's a bit iffy, so if you absolutely must use AJAX over standard page loading, you really, really should use things like history.pushState (and have standard page loading as a fallback for browsers that don't support it). There's a jQuery plugin which handles this stuff for you, written by a GitHubber, called pjax, which they use only for repo navigation.
you moved the handler? maybe you should move the function to the inner frame as well, so that when you grab height values you reference the body directly rather than frame object... then call a parent.set height function
another trick, call function after settimeout of 10 msecs
i remember I had that problem once but I used IE's getBoundingClientRect() to get height of content, check mozilla developer center for something similar, this is just a hint, i did not research it
on another note, what is ifmBluePill? is it the iframe? or a div inside of it? why do you reference "contentDocument" of a div?
By the way, DynamicDrive improved their script to always resize even if the iframe contents change: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
From their page:
This is version II of the original
Iframe SSI script, which like the
original script lets you seamlessly
display external content on your page
via an IFRAME. It does this by
dynamically resizing the IFRAME to be
the height of the page contained
within it, eliminating any possible
IFRAME scrollbars from appearing while
snugly showing the entire external
content. Think of it as SSI (server
side includes) emulated using DHTML!
This script works in both IE5+ and
NS6+, and for other browsers, supports
the option to either completely hide
the iframe in question or display it
using its default height.
Now, this script differs from the
original in that you can load
additional documents* into the IFRAME
even after the page has loaded, and
the IFRAME will dynamically adjust its
height to fit the new document. So use
this script if you need to not only
display external content via the
IFRAME tag, but intend to change this
content after the page has loaded.