This, in turn, usually closely matches with getBoundingClientRect(), with the main difference being that scrollHeight will round to an integer, whereas bounding will return a fractional (float). This is normally on the html or body elements, but it could be on any element in the page.Since offsetHeight does not take into account non-visible content due to a scrollbar, it can often be significantly different than the true absolute (visible + non-visible) value, which is usually more accurate with scrollHeight. 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. In such cases you can change the heightCalculationMethod to uses one of the other sizing methods. If a larger element of content is removed from the normal document flow, through the use of absolute positioning, it can prevent the browser working out the correct size of the page. Please read the contributing guidelines before openning a ticket, as this will ensure a faster resolution. If you need futher help, then please ask questions on StackOverflow with the iframe-resizer tag.īug reports and pull requests are welcome on the issue tracker. Solutions for the most common problems are outlined in this section. This will enable you to see what both the iFrame and host page are up to and also see any JavaScript error messages. The first steps to investigate a problem is to make sure you are using the latest version and then enable the log option, which outputs everything that happens to the JavaScript Console. The targetOrigin option is used to restrict where the message is sent to, in case your iFrame navigates away to another domain. Send data to the containing page, message can be any data type that can be serialized into JSON. This has the following methods available. Once the iFrame has been initialized, an iFrameResizer object is bound to it. indexOf ( " MSIE " ) != - 1 ) // Detect IE10 and below iFrameResize ( If the default option doesn’t work then the best solutions is to either to use taggedElement, or to use lowestElement in modern browsers and max in IE10 downwards. taggedElement Finds the bottom of the lowest element with a data-iframe-height attribute.lowestElement Loops though every element in the the DOM and finds the lowest bottom point †.This provides much better performance if your iFrame will only ever increase in size grow same as max but disables the double resize that is used to workout if the iFrame needs to shrink.min takes the smallest value of the main four options *.max takes the largest value of the main four options *.You will need to experiment to see which is best for any particular circumstance. Each can give different values depending on how CSS is used in the page and each has varying side-effects. In cases where CSS styles causes the content to flow outside the body you may need to change this setting to one of the following options. 'max' | 'min' | 'grow' | 'lowestElement' | 'taggedElement'īy default the height of the iFrame is calculated by converting the margin of the body to px and then adding the top and bottom figures to the offsetHeight of the body tag. Values: 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' | The first ( ) is for the page hosting the iFrames. The package contains two minified JavaScript files in the js folder. #CALL PARENT WINDOW JS FUNCTION FROM IFRAME SCROLLING PDF#Works with ViewerJS to support PDF and ODF documents. Exposes parent position and viewport size to the iFrame.Provides custom sizing and scrolling methods.Fixes in page links in iFrame and supports links between the iFrame and parent page.Simplified messaging between iFrame and host page via postMessage.Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).Detects changes to the DOM that can cause the page to resize using MutationObserver.Provides a range of page size calculation methods to support complex CSS layouts.Domain authentication for cross domain iFrames.Works with multiple and nested iFrames.Height and width resizing of the iFrame to content size.It provides a range of features to address the most common issues with using iFrames, these include: This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. This project is maintained by davidjbradshaw iFrame Resizer Size cross domain iFrames to content with support for window/content resizing, and multiple iFrames.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |