Javascript 如何使此iframe在垂直和水平方向上都适合页面？
我从Material UI获得了以下沙盒： 当页面加载时，它将在iframe中加载一些HTML。虽然宽度看起来很合适，但垂直大小却不合适，并显示2个滚动条。我如何摆脱外部滚动条？其思想是加载任意大小的html，并能够根据html的高度动态调整它。如果html更长，那么它应该只显示一个滚动条，而不是当前的两个滚动条 谢谢Javascript 如何使此iframe在垂直和水平方向上都适合页面？,javascript,css,reactjs,iframe,material-ui,Javascript,Css,Reactjs,Iframe,Material Ui,我从Material UI获得了以下沙盒： 当页面加载时，它将在iframe中加载一些HTML。虽然宽度看起来很合适，但垂直大小却不合适，并显示2个滚动条。我如何摆脱外部滚动条？其思想是加载任意大小的html，并能够根据html的高度动态调整它。如果html更长，那么它应该只显示一个滚动条，而不是当前的两个滚动条 谢谢 import React, { useEffect } from "react"; import clsx from "clsx"; im
import React, { useEffect } from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import Paper from "@material-ui/core/Paper";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},
appBar: {
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen
})
},
menuButton: {
marginRight: theme.spacing(2)
},
hide: {
display: "none"
},
drawer: {
width: drawerWidth,
flexShrink: 0
},
drawerPaper: {
width: drawerWidth
},
drawerHeader: {
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: "flex-end"
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
marginLeft: -drawerWidth
},
contentShift: {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen
}),
marginLeft: 0
}
}));
export default function PersistentDrawerLeft() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [html, setHtml] = React.useState("");
useEffect(() => {
setHtml(`<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet">
<style>
#table_wrapper{
overflow-x: hidden;
}
.mdc-data-table{
width: 100%;
}
</style>
</head>
<body>
<table id="jEZeucEZQISp" class="display" style="width:100%">
<thead>
<tr>
<th>STATE</th>
<th>CAPITAL</th>
<th>WIKIPEDIA LINK</th>
<th>VISITED</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
var my_jquery = $.noConflict(true);
my_jquery(document).ready(function(){
my_jquery('#jEZeucEZQISp').DataTable({
data: [["Alabama","Montgomery","https://en.wikipedia.org/wiki/Montgomery,_Alabama","TRUE"],["Alaska","Juneau","https://en.wikipedia.org/wiki/Juneau,_Alaska","TRUE"],["Arizona","Phoenix","https://en.wikipedia.org/wiki/Phoenix,_Arizona","TRUE"],["Arkansas","Little Rock","https://en.wikipedia.org/wiki/Little_Rock,_Arkansas","TRUE"],["California","Sacramento","https://en.wikipedia.org/wiki/Sacramento,_California","TRUE"],["Colorado","Denver","https://en.wikipedia.org/wiki/Denver,_Colorado","TRUE"],["Connecticut","Hartford","https://en.wikipedia.org/wiki/Hartford,_Connecticut","TRUE"],["Delaware","Dover","https://en.wikipedia.org/wiki/Dover,_Delaware","FALSE"],["Florida","Tallahassee","https://en.wikipedia.org/wiki/Tallahassee,_Florida","TRUE"],["Georgia","Atlanta","https://en.wikipedia.org/wiki/Atlanta,_Georgia","TRUE"],["Hawaii","Honolulu","https://en.wikipedia.org/wiki/Honolulu,_Hawaii","TRUE"],["Idaho","Boise","https://en.wikipedia.org/wiki/Boise,_Idaho","TRUE"],["Illinois","Springfield","https://en.wikipedia.org/wiki/Springfield,_Illinois","TRUE"],["Indiana","Indianapolis","https://en.wikipedia.org/wiki/Indianapolis,_Indiana","TRUE"],["Iowa","Des Moines","https://en.wikipedia.org/wiki/Des%20Moines,_Iowa","TRUE"],["Kansas","Topeka","https://en.wikipedia.org/wiki/Topeka,_Kansas","TRUE"],["Kentucky","Frankfort","https://en.wikipedia.org/wiki/Frankfort,_Kentucky","TRUE"],["Louisiana","Baton Rouge","https://en.wikipedia.org/wiki/Baton%20Rouge,_Louisiana","TRUE"],["Maine","Augusta","https://en.wikipedia.org/wiki/Augusta,_Maine","TRUE"],["Maryland","Annapolis","https://en.wikipedia.org/wiki/Annapolis,_Maryland","TRUE"],["Massachusetts","Boston","https://en.wikipedia.org/wiki/Boston,_Massachusetts","TRUE"],["Michigan","Lansing","https://en.wikipedia.org/wiki/Lansing,_Michigan","TRUE"],["Minnesota","St. Paul","https://en.wikipedia.org/wiki/St.%20Paul,_Minnesota","TRUE"],["Mississippi","Jackson","https://en.wikipedia.org/wiki/Jackson,_Mississippi","TRUE"],["Missouri","Jefferson City","https://en.wikipedia.org/wiki/Jefferson%20City,_Missouri","TRUE"],["Montana","Helena","https://en.wikipedia.org/wiki/Helena,_Montana","TRUE"],["Nebraska","Lincoln","https://en.wikipedia.org/wiki/Lincoln,_Nebraska","TRUE"],["Nevada","Carson City","https://en.wikipedia.org/wiki/Carson%20City,_Nevada","TRUE"],["New Hampshire","Concord","https://en.wikipedia.org/wiki/Concord,_New%20Hampshire","TRUE"],["New Jersey","Trenton","https://en.wikipedia.org/wiki/Trenton,_New%20Jersey","TRUE"],["New Mexico","Santa Fe","https://en.wikipedia.org/wiki/Santa%20Fe,_New%20Mexico","TRUE"],["New York","Albany","https://en.wikipedia.org/wiki/Albany,_New%20York","TRUE"],["North Carolina","Raleigh","https://en.wikipedia.org/wiki/Raleigh,_North%20Carolina","TRUE"],["North Dakota","Bismarck","https://en.wikipedia.org/wiki/Bismarck,_North%20Dakota","TRUE"],["Ohio","Columbus","https://en.wikipedia.org/wiki/Columbus,_Ohio","TRUE"],["Oklahoma","Oklahoma City","https://en.wikipedia.org/wiki/Oklahoma%20City,_Oklahoma","TRUE"],["Oregon","Salem","https://en.wikipedia.org/wiki/Salem,_Oregon","TRUE"],["Pennsylvania","Harrisburg","https://en.wikipedia.org/wiki/Harrisburg,_Pennsylvania","TRUE"],["Rhode Island","Providence","https://en.wikipedia.org/wiki/Providence,_Rhode%20Island","TRUE"],["South Carolina","Columbia","https://en.wikipedia.org/wiki/Columbia,_South%20Carolina","TRUE"],["South Dakota","Pierre","https://en.wikipedia.org/wiki/Pierre,_South%20Dakota","TRUE"],["Tennessee","Nashville","https://en.wikipedia.org/wiki/Nashville,_Tennessee","TRUE"],["Texas","Austin","https://en.wikipedia.org/wiki/Austin,_Texas","TRUE"],["Utah","Salt Lake City","https://en.wikipedia.org/wiki/Salt%20Lake%20City,_Utah","TRUE"],["Vermont","Montpelier","https://en.wikipedia.org/wiki/Montpelier,_Vermont","TRUE"],["Virginia","Richmond","https://en.wikipedia.org/wiki/Richmond,_Virginia","TRUE"],["Washington","Olympia","https://en.wikipedia.org/wiki/Olympia,_Washington","TRUE"],["West Virginia","Charleston","https://en.wikipedia.org/wiki/Charleston,_West%20Virginia","TRUE"],["Wisconsin","Madison","https://en.wikipedia.org/wiki/Madison,_Wisconsin","TRUE"],["Wyoming","Cheyenne","https://en.wikipedia.org/wiki/Cheyenne,_Wyoming","TRUE"]],
iDisplayLength: 25 ,
"scrollX": false,
scrollY: '',
scrollCollapse: false ,
search: {
search: "",
},
});
});
</script>
</body>
</html>`);
}, []);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "ltr" ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
</div>
<Divider />
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<main
className={clsx(classes.content, {
[classes.contentShift]: open
})}
>
<div className={classes.drawerHeader} />
<Paper
elevation={1}
style={{ minHeight: "auto", height: "100vh" }}
flex={1}
overflow="auto"
>
<iframe
id="widget"
name="widget"
title="widget"
scrolling="yes"
frameBorder="0"
width="100%"
height="100%"
srcdoc={html}
style={{ position: "relative", height: "100%" }}
></iframe>
</Paper>
</main>
</div>
);
}
import React，{useffect}来自“React”；
从“clsx”导入clsx；
从“@material ui/core/styles”导入{makeStyles，useTheme}”；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入收件箱；
从“@material ui/icons/Mail”导入MailIcon；
从“@material ui/core/Paper”导入纸张；
常数抽屉宽度=240；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”
},
appBar：{
过渡：主题。过渡。创建（[“边距”，“宽度”]{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen
})
},
appBarShift：{
宽度：`calc（100%-${drawerWidth}px）`，
页边左侧：抽屉宽度，
过渡：主题。过渡。创建（[“边距”，“宽度”]{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen
})
},
菜单按钮：{
边缘光：主题。间距（2）
},
隐藏：{
显示：“无”
},
出票人：{
宽度：抽屉宽度，
flexShrink:0
},
抽屉纸：{
宽度：抽屉宽度
},
抽屉阅读器：{
显示：“flex”，
对齐项目：“中心”，
填充：主题。间距（0，1），
//内容必须位于应用程序栏下方
…theme.mixins.toolbar，
辩护内容：“柔性端”
},
内容：{
flexGrow:1，
填充：主题。间距（3），
过渡：theme.transitions.create（“margin”{
放松：主题。过渡。放松。尖锐，
持续时间：theme.transitions.duration.leavingScreen
}),
边缘左侧：-抽屉宽度
},
contentShift：{
过渡：theme.transitions.create（“margin”{
放松：theme.transitions.easing.easeOut，
持续时间：theme.transitions.duration.enteringScreen
}),
边缘左侧：0
}
}));
导出默认函数PersistentDrawerLeft（）{
const classes=useStyles（）；
const theme=useTheme（）；
const[open，setOpen]=React.useState（false）；
const[html，setHtml]=React.useState（“”）；
useffect（（）=>{
setHtml(`
#表格包装{
溢出x：隐藏；
}
.mdc数据表{
宽度：100%；
}
陈述
首都
维基百科链接
拜访
var my_jquery=$.noConflict（true）；
my_jquery（document）.ready（function（））{
my#jquery（'#jEZeucEZQISp'）.DataTable({
数据：[“阿拉巴马州”、“蒙哥马利州”https://en.wikipedia.org/wiki/Montgomery阿拉巴马州、真州、阿拉斯加州、朱诺州、https://en.wikipedia.org/wiki/Juneau阿拉斯加州、真的、亚利桑那州、凤凰城、https://en.wikipedia.org/wiki/Phoenix“亚利桑那州”、“真的”、“阿肯色州”、“小石城”https://en.wikipedia.org/wiki/Little_Rock“阿肯色州”、“真实”]、[“加利福尼亚州”，“萨克拉门托”https://en.wikipedia.org/wiki/Sacramento，_California，，[加利福尼亚州]，[科罗拉多州]，[丹佛州]，“https://en.wikipedia.org/wiki/Denver“科罗拉多州”、“真实”]、[“康涅狄格州”、“哈特福德州”、”https://en.wikipedia.org/wiki/Hartford“康涅狄格州”、“真实”]、[“特拉华州”、“多佛州”、”https://en.wikipedia.org/wiki/Dover“特拉华州”、“假”]、[“佛罗里达州”、“塔拉哈西州”、”https://en.wikipedia.org/wiki/Tallahassee“佛罗里达州”、“真实”]、[“乔治亚州”、“亚特兰大州”、”https://en.wikipedia.org/wiki/Atlanta“佐治亚州”、“真实”]、[“夏威夷”、“檀香山”、”https://en.wikipedia.org/wiki/Honolulu“夏威夷”、“真实”]、[“爱达荷”、“博伊西”、”https://en.wikipedia.org/wiki/Boise，爱达荷州，真的，[“伊利诺伊州”，“斯普林菲尔德州”https://en.wikipedia.org/wiki/Springfield伊利诺伊州、真州、印第安纳州、印第安纳波利斯州、https://en.wikipedia.org/wiki/Indianapolis“印第安纳州”、“真实”]、[“爱荷华州”、“得梅因州”https://en.wikipedia.org/wiki/Des%20Moines爱荷华州、真州、堪萨斯州、托皮卡州、https://en.wikipedia.org/wiki/Topeka“堪萨斯州”、“真实”]、[“肯塔基州”、“法兰克福州”、”https://en.wikipedia.org/wiki/Frankfort“肯塔基州”、“真实”]、[“路易斯安那州”、“巴吞鲁日”、”https://en.wikipedia.org/wiki/Baton%20Rouge“路易斯安那州”、“真实”]，[“缅因州”、“奥古斯塔州”https://en.wikipedia.org/wiki/Augusta，缅因州，真的，[“马里兰州”，“安纳波利斯”https://en.wikipedia.org/wiki/Annapolis，_马里兰，，[马萨诸塞州，，[波士顿]，[真实的]https://en.wikipedia.org/wiki/Boston“马萨诸塞州”、“真实”]、[“密歇根州”、“兰辛州”、”https://en.wikipedia.org/wiki/Lansing密歇根大学、真的、明尼苏达州、圣保罗、https://en.wikipedia.org/wiki/St.%20Paul“明尼苏达州”、“真实”]，[“密西西比州”、“杰克逊州”https://en.wikipedia.org/wiki/Jackson“密西西比州”、“真实”]，[“密苏里州”、“杰斐逊市”https://en.wikipedia.org/wiki/Jefferson%20City“密苏里州”、“真的”]，[“蒙大拿州”、“海伦娜州”https://en.wikipedia.org/wiki/Helena，蒙大拿州，真的，内布拉斯加州，林肯，h
<script>
function resizeIframe()
{
var document = window.parent.document;
var iframe = document.getElementById('widget');
iframe.style.height = (iframe.contentWindow.document.documentElement.scrollHeight + 18) + 'px';
}
var my_jquery = $.noConflict(true);
my_jquery(document).ready(function(){
my_jquery('#jEZeucEZQISp').DataTable({
data: [["Alabama","Montgomery","https://en.wikipedia.org/wiki/Montgomery,_Alabama","TRUE"],["Alaska","Juneau","https://en.wikipedia.org/wiki/Juneau,_Alaska","TRUE"],["Arizona","Phoenix","https://en.wikipedia.org/wiki/Phoenix,_Arizona","TRUE"],["Arkansas","Little Rock","https://en.wikipedia.org/wiki/Little_Rock,_Arkansas","TRUE"],["California","Sacramento","https://en.wikipedia.org/wiki/Sacramento,_California","TRUE"],["Colorado","Denver","https://en.wikipedia.org/wiki/Denver,_Colorado","TRUE"],["Connecticut","Hartford","https://en.wikipedia.org/wiki/Hartford,_Connecticut","TRUE"],["Delaware","Dover","https://en.wikipedia.org/wiki/Dover,_Delaware","FALSE"],["Florida","Tallahassee","https://en.wikipedia.org/wiki/Tallahassee,_Florida","TRUE"],["Georgia","Atlanta","https://en.wikipedia.org/wiki/Atlanta,_Georgia","TRUE"],["Hawaii","Honolulu","https://en.wikipedia.org/wiki/Honolulu,_Hawaii","TRUE"],["Idaho","Boise","https://en.wikipedia.org/wiki/Boise,_Idaho","TRUE"],["Illinois","Springfield","https://en.wikipedia.org/wiki/Springfield,_Illinois","TRUE"],["Indiana","Indianapolis","https://en.wikipedia.org/wiki/Indianapolis,_Indiana","TRUE"],["Iowa","Des Moines","https://en.wikipedia.org/wiki/Des%20Moines,_Iowa","TRUE"],["Kansas","Topeka","https://en.wikipedia.org/wiki/Topeka,_Kansas","TRUE"],["Kentucky","Frankfort","https://en.wikipedia.org/wiki/Frankfort,_Kentucky","TRUE"],["Louisiana","Baton Rouge","https://en.wikipedia.org/wiki/Baton%20Rouge,_Louisiana","TRUE"],["Maine","Augusta","https://en.wikipedia.org/wiki/Augusta,_Maine","TRUE"],["Maryland","Annapolis","https://en.wikipedia.org/wiki/Annapolis,_Maryland","TRUE"],["Massachusetts","Boston","https://en.wikipedia.org/wiki/Boston,_Massachusetts","TRUE"],["Michigan","Lansing","https://en.wikipedia.org/wiki/Lansing,_Michigan","TRUE"],["Minnesota","St. Paul","https://en.wikipedia.org/wiki/St.%20Paul,_Minnesota","TRUE"],["Mississippi","Jackson","https://en.wikipedia.org/wiki/Jackson,_Mississippi","TRUE"],["Missouri","Jefferson City","https://en.wikipedia.org/wiki/Jefferson%20City,_Missouri","TRUE"],["Montana","Helena","https://en.wikipedia.org/wiki/Helena,_Montana","TRUE"],["Nebraska","Lincoln","https://en.wikipedia.org/wiki/Lincoln,_Nebraska","TRUE"],["Nevada","Carson City","https://en.wikipedia.org/wiki/Carson%20City,_Nevada","TRUE"],["New Hampshire","Concord","https://en.wikipedia.org/wiki/Concord,_New%20Hampshire","TRUE"],["New Jersey","Trenton","https://en.wikipedia.org/wiki/Trenton,_New%20Jersey","TRUE"],["New Mexico","Santa Fe","https://en.wikipedia.org/wiki/Santa%20Fe,_New%20Mexico","TRUE"],["New York","Albany","https://en.wikipedia.org/wiki/Albany,_New%20York","TRUE"],["North Carolina","Raleigh","https://en.wikipedia.org/wiki/Raleigh,_North%20Carolina","TRUE"],["North Dakota","Bismarck","https://en.wikipedia.org/wiki/Bismarck,_North%20Dakota","TRUE"],["Ohio","Columbus","https://en.wikipedia.org/wiki/Columbus,_Ohio","TRUE"],["Oklahoma","Oklahoma City","https://en.wikipedia.org/wiki/Oklahoma%20City,_Oklahoma","TRUE"],["Oregon","Salem","https://en.wikipedia.org/wiki/Salem,_Oregon","TRUE"],["Pennsylvania","Harrisburg","https://en.wikipedia.org/wiki/Harrisburg,_Pennsylvania","TRUE"],["Rhode Island","Providence","https://en.wikipedia.org/wiki/Providence,_Rhode%20Island","TRUE"],["South Carolina","Columbia","https://en.wikipedia.org/wiki/Columbia,_South%20Carolina","TRUE"],["South Dakota","Pierre","https://en.wikipedia.org/wiki/Pierre,_South%20Dakota","TRUE"],["Tennessee","Nashville","https://en.wikipedia.org/wiki/Nashville,_Tennessee","TRUE"],["Texas","Austin","https://en.wikipedia.org/wiki/Austin,_Texas","TRUE"],["Utah","Salt Lake City","https://en.wikipedia.org/wiki/Salt%20Lake%20City,_Utah","TRUE"],["Vermont","Montpelier","https://en.wikipedia.org/wiki/Montpelier,_Vermont","TRUE"],["Virginia","Richmond","https://en.wikipedia.org/wiki/Richmond,_Virginia","TRUE"],["Washington","Olympia","https://en.wikipedia.org/wiki/Olympia,_Washington","TRUE"],["West Virginia","Charleston","https://en.wikipedia.org/wiki/Charleston,_West%20Virginia","TRUE"],["Wisconsin","Madison","https://en.wikipedia.org/wiki/Madison,_Wisconsin","TRUE"],["Wyoming","Cheyenne","https://en.wikipedia.org/wiki/Cheyenne,_Wyoming","TRUE"]],
iDisplayLength: 25 ,
"scrollX": true,
scrollY: '',
scrollCollapse: false ,
search: {
search: "",
},
});
resizeIframe();
my_jquery(window.parent).on('resize', resizeIframe);
});
</script>
<iframe
id="widget"
name="widget"
title="widget"
scrolling="auto"
frameBorder="0"
width="100%"
srcDoc={html}
style={{ position: "relative"}}
></iframe>
<Paper elevation={1} style={{ height: "90%" }} flex={1} overflow="auto">
<iframe
id="widget"
name="widget"
title="widget"
...
const iframeRef = React.createRef();
const [iframeHeight, setIframeHeight] = React.useState('100%');
React.useEffect(() => {
setIframeHeight(`${iframeRef.current.contentWindow.document.documentElement.scrollHeight}px`);
}, []);
const iframeRef = React.createRef();
<iframe
ref={iframeRef}
id="widget"
name="widget"
title="widget"
scrolling="yes"
frameBorder="0"
width="100%"
height={iframeHeight}
srcdoc={html}
style={{ position: "relative", height: iframeHeight }}
></iframe>