Using iframes in a responsive page can be frustrating. It also bypasses the usual cross-domain issues. See an example of this in action. In version 1. Learn about it here. Version 1. We recommend everyone update to 1. More information here. Getting Pym. We will keep the CDN version up-to-date so that we can fix bugs and add new features and you won't have to change anything.

Learn more about our versioning strategy. We recommend using httpsbut the unsecure http protocol is also supported if you need it. If you use Bower to manage your Javascript dependencies then you can install Pym. Internet Explorer versions earlier than 9 are not supported. If you want to read more about our tests and testing strategy take a look at the docs in the repo here. The height of the iframe adjusts to the height of the content onload and onresize.

This might be useful in cases where sections of your child page need to be redrawn based on the new width.

Accessing an iframe document (contentWindow) - JavaScript Tutorial

For example, a graphic generated by D3, which would not stretch or reflow on its own. If you have dynamic content and need finer control over resize events, you can invoke pymChild. If you have links in your iframe that lead to other pages, you can maintain auto-resizing on the subsequent pages by explicitly setting the child ID in each one.

npm iframe

Although not its original purpose, Pym. A simple, jQuery-like event binding model is used to support this message passing. In the following example a click on the link in the parent container will navigate the child frame to a new location.

Note that the reverse scenario can be performed as well; children can send messages to the parent with the same sendMessage function. As scrolling and navigating the parent window is a very common need, there are shortcuts for these actions that do not require you to implement your own events.

iFrame Resizer V4

Starting in v1.This is a playground to test code. It runs a full Node. Try it out :. This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

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 s 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. The package contains two minified JavaScript files in the js folder.

The first iframeResizer.

npm iframe

It can be called with via JavaScript:. The second file iframeResizer. 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.

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.

Licensed under the MIT License. Share this code:. Overview Browse Files. 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. Simplified messaging between iFrame and host page via postMessage. Fixes in page links in iFrame and supports links between the iFrame and parent page.

React Iframe

Provides custom sizing and scrolling methods. Exposes parent position and viewport size to the iFrame. Supports IE 11 V3 supports back to IE8 Donate Iframe-resizer is the result of many s 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.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. It integrated with iframes with is popular in china admin systems. Almsaeed Studio.

Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. HTML Branch: master. Find file. Sign in Sign up. Go back. Launching Xcode If nothing happens, download Xcode and try again. This branch is commits ahead, commits behind ColorlibHQ:master. Pull request Compare. Latest commit.

npm iframe

Latest commit 8baab8f Mar 22, License 8. Todo List 9. Almsaeed Studio reserves the right to change the license of future releases. Todo List jquery pace integration example to manager tabs within an iframe page. You signed in with another tab or window. Reload to refresh your session.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service. The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

There is a npm package react-iframebut it looks unfinished accepts only props urlwidthheight :.

npm iframe

The likely part of the solution is to listen to the load event of the iframebut in a way that is compatible with React. Is there a way in React to set the height of an iframe to the height of its scrollable contents? What you want to do is in your componentDidMount, run the script to set the height. In this example we're storing the determined content height in the component's state and using that state to set the height of the rendered iframe.

Also, by putting the onLoad handler definition in the component, you save a tiny bit of performance in render by not creating a new handler function on every re-render. None of the answers proposed so far worked for me. The hackish approach of doing a short setTimeout from within onLoad kind-of seems to do the job, at least in my case. This npm package will do what you what, it offers a range of different ways to calculate the height of the content in the iframe.

Learn more. Asked 3 years, 2 months ago. Active 5 months ago. Viewed 13k times. Peter G. Active Oldest Votes. Kevin Danikowski 1, 1 1 gold badge 11 11 silver badges 33 33 bronze badges. Feb 4 '17 at Update: This was fixed by using the iframe as root element in the component's return method.

Now the problem is that height is being set to 8px. Probably because the iframe is yet not being fully loaded. Cannot read property 'document' of undefined - that means contentWindow is not found - that means iFrame is not loaded.Build amazing things We're npm, Inc. We offer those to the community for free, but our day job is building and selling useful tools for developers like you.

Get started today for free, or step up to npm Pro to enjoy a premium JavaScript development experience, with features like private packages. Sign up for free. Learn about Pro. Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of JavaScript code sharing, and with more than one million packages, the largest software registry in the world.

Our other tools and services take the Registry, and the work you do around it, to the next level. Become a contributing member of the open source JavaScript community. Create public packages, publish updates, audit your dependencies, and more.

For next-level JavaScript developers who want more capabilities. Pro and Teams add the ability to build private packages for you, your team, or for customers. For very large teams and business-critical projects, npm Enterprise delivers features that organizations with hundreds of developers need, like SSO and enhanced security. Our security team's unique insights into JavaScript vulnerabilities and threats are delivered as free and premium features, as well as services for resellers and others.

Simple solution for using iframes in React

Gratefully serving everyone from solo devs to the Fortune GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. It's been rebuilt as web component with stencil so it works with native javascript as well as popular frameworks like react, angular, vue etc.

If you're looking for the old documentation for the ng version you can find it here. Skip to content. This repository has been archived by the owner. It is now read-only. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. TypeScript Branch: master. Find file. Sign in Sign up. Go back. Launching Xcode If nothing happens, download Xcode and try again.

Latest commit. Latest commit 4b2dc50 Mar 24, You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window.

Oct 15, Mar 16, Oct 24, Oct 22, Apr 26, Mar 23, Oct 23, 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 s 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.

npm Documentation

The package contains two minified JavaScript files in the js folder. The first iframeResizer. It can be called with via JavaScript:.

The second file iframeResizer. 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.

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. Licensed under the MIT License. Git github. Need private packages and team management tools?

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.