Главная » Языки программирования

Javascript iframe auto resize

На чтение 12 мин
Содержание
  1. iFrame Resizer V4
  2. Donate
  3. Getting Started
  4. Install
  5. Usage
  6. Typical setup
  7. Example
  8. API Documentation
  9. License
  10. Change Iframe Size Automatically to Fit Content & Prevent Scrollbars
  11. Same-Domain Iframes
  12. Cross-Domain Iframes
  13. Demo
  14. Saved searches
  15. Use saved searches to filter your results more quickly
  16. License
  17. davidjbradshaw/iframe-resizer
  18. Name already in use
  19. Sign In Required
  20. Launching GitHub Desktop
  21. Launching GitHub Desktop
  22. Launching Xcode
  23. Launching Visual Studio Code
  24. Latest commit
  25. Git stats
  26. Files
  27. README.md
  28. About
  29. iFrame Resizer V4
  30. Donate
  31. Getting Started
  32. Install
  33. Usage
  34. Typical setup
  35. Example
  36. API Documentation
  37. License

iFrame Resizer V4

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:

  • Height and width resizing of the iFrame to content size.
  • Works with multiple and nested iFrames.
  • Domain authentication for cross domain iFrames.
  • Provides a range of page size calculation methods to support complex CSS layouts.
  • Detects changes to the DOM that can cause the page to resize using MutationObserver.
  • Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
  • Simplified messaging between iFrame and host page via postMessage.
  • Fixes in page links in iFrame and supports links between the iFrame and parent page.
  • Provides custom sizing and scrolling methods.
  • Exposes parent position and viewport size to the iFrame.
  • Provides onMouseEnter and onMouseLeave events for the iFrame.
  • Works with ViewerJS to support PDF and ODF documents.
  • Supports IE 11 (V3 supports back to IE8)

Iframe-resizer is the result of many 100s of hours of work, if you would like to join others in showing support for the continued 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.

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

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-23 David J. Bradshaw — Licensed under the MIT License

Источник

Change Iframe Size Automatically to Fit Content & Prevent Scrollbars

There are 2 ways to automatically change the size of an so as to fit its content and prevent scrollbars :

  • For same-domain iframes : From the parent page, the complete height & width of the iframe can be found through its contentDocument.body.scrollHeight & contentDocument.body.scrollWidth properties. These values can then be set as the CSS height & width of the element.
  • For cross-domain iframes : The iframe page can send a message to the parent page using postMessage() , informing about its size. On receiving the message, the parent page can change CSS height & width of the element.

Same-Domain Iframes

For same-domain iframes, code changes are required only in the parent page. The iframe page needs no code changes.

  • First we need to wait for the iframe to be loaded so that its correct dimensions are available.
  • After iframe has been loaded, contentDocument.body.scrollHeight property gets its full height.
  • contentDocument.body.scrollWidth property gets its full width.

Cross-Domain Iframes

For cross-domain iframes, code changes are needed in both the iframe & the parent page.

    The iframe page needs to be loaded first to get correct dimensions. After loading, its dimensions are passed to the parent page using postMessage() .

window.addEventListener('load', function() < let message = < height: document.body.scrollHeight, width: document.body.scrollWidth >; // window.top refers to parent window window.top.postMessage(message, "*"); >);

Demo

The demo uses a same-origin iframe. It uses setInterval() to keep checking the iframe size at intervals of 500ms.

Download Codes
(Note that even though the files contain only HTML, you must run them from a server)

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames

License

davidjbradshaw/iframe-resizer

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

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:

  • Height and width resizing of the iFrame to content size.
  • Works with multiple and nested iFrames.
  • Domain authentication for cross domain iFrames.
  • Provides a range of page size calculation methods to support complex CSS layouts.
  • Detects changes to the DOM that can cause the page to resize using MutationObserver.
  • Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
  • Simplified messaging between iFrame and host page via postMessage.
  • Fixes in page links in iFrame and supports links between the iFrame and parent page.
  • Provides custom sizing and scrolling methods.
  • Exposes parent position and viewport size to the iFrame.
  • Provides onMouseEnter and onMouseLeave events for the iFrame.
  • Works with ViewerJS to support PDF and ODF documents.
  • Supports IE 11 (V3 supports back to IE8)

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

Buy Me A Coffee

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

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.

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> script src pl-s">/js/iframeResizer.min.js">script> iframe id pl-s">myIframe" src pl-s">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.

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

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

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

About

Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames

Источник

iFrame Resizer V4

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:

  • Height and width resizing of the iFrame to content size.
  • Works with multiple and nested iFrames.
  • Domain authentication for cross domain iFrames.
  • Provides a range of page size calculation methods to support complex CSS layouts.
  • Detects changes to the DOM that can cause the page to resize using MutationObserver.
  • Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
  • Simplified messaging between iFrame and host page via postMessage.
  • Fixes in page links in iFrame and supports links between the iFrame and parent page.
  • Provides custom sizing and scrolling methods.
  • Exposes parent position and viewport size to the iFrame.
  • Provides onMouseEnter and onMouseLeave events for the iFrame.
  • Works with ViewerJS to support PDF and ODF documents.
  • Supports IE 11 (V3 supports back to IE8)

Iframe-resizer is the result of many 100s of hours of work, if you would like to join others in showing support for the continued 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> script src pl-s">/js/iframeResizer.min.js">script> iframe id pl-s">myIframe" src pl-s">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-23 David J. Bradshaw — Licensed under the MIT License

Источник

Читайте также:  Php file exists clearstatcache
Оцените статью
© 2023 Программирование