"Fossies" - the Fresh Open Source Software Archive

Member "matomo/node_modules/iframe-resizer/README.md" (3 Aug 2022, 6497 Bytes) of package /linux/www/matomo-4.11.0.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format (assuming markdown format). Alternatively you can here view or download the uninterpreted source code file. A member file download can also be achieved by clicking within a package contents listing on the according byte size field.

A hint: This file contains one or more very long lines, so maybe it is better readable using the pure text view mode that shows the contents as wrapped lines within the browser window.


iFrame Resizer V4

NPM version NPM Downloads Coverage Status Donate

This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include:

Iframe-resizer is the result of many 100s of hours of work, if you would like to join others in showing support for the development of this project, then please feel free to buy me a coffee.

Buy Me A Coffee

Getting Started

Install

This package can be installed via NPM (npm install iframe-resizer --save).

Usage

The package contains two minified JavaScript files in the js folder. The first (iframeResizer.min.js) is for the page hosting the iFrames. It can be called with via JavaScript:

const iframes = iFrameResize( [{options}], [css selector] || [iframe] );

The second file (iframeResizer.contentWindow.min.js) needs placing in the page(s) contained within your iFrame. This file is designed to be a guest on someone else’s system, so has no dependencies and won’t do anything until it’s activated by a message from the containing page.

Typical setup

The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.

<style>
  iframe {
    width: 1px;
    min-width: 100%;
  }
</style>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
  iFrameResize({ log: true }, '#myIframe')
</script>

Note: Using min-width to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.

If you have problems, check the troubleshooting section.

Example

To see this working take a look at this example and watch the console.

API Documentation

IFrame-Resizer provides an extensive range of options and APIs for both the parent page and the iframed page.

License

Copyright © 2013-20 David J. Bradshaw. Licensed under the MIT License.