React Awesome IFrame Components. Adding Loading Options and loadFunc, you can do something when load iframe
npm install react-awesome-iframe
or
yarn add react-awesome-iframe
import React from "react";
import IFrame from "react-iframe";
const iframeProps = {
loading: true,
loadingText: "加载中",
width: "100%",
height: window.innerHeight - 30,
src: "https://xxx",
loadFunc: function() {
alert("already loaded, now you can do something.");
}
};
const Example = () => <IFrame {...iframeProps} />;
export default Example;
Attribute | Desc | Type | Default Value |
---|---|---|---|
loading | need show iframe loading | boolean | true |
loadingText | Loading Text Show | string | Loading |
loadFunc | loadFunc Function, when Load, you can do something | function(e) |
allow - Specifies a feature policy for the iframe.
allowfullscreen - allow iframe fullscreen.
src - string if set, overrides url.
scrolling - string not set if if not provided (deprecated in HTML5).
frameBorder - number default to "0" (deprecated in HTML5).
longdesc - A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers. )
height - string (1px > any number above 0, or 1% to 100%)
width - string (1px > any number above 0, or 1% to 100%)
sandbox - add optional sandbox values ("allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation")
other props - iframe can support's props
MIT