javascript - 如何使这个 iframe 在垂直和水平方向都适合页面?
问题描述
我有来自 Material UI 的以下沙箱:https ://codesandbox.io/s/material-demo-forked-c8e39?file=/demo.js
当页面加载时,它会在 iframe 中加载一些 HTML。虽然宽度似乎很合适,但垂直尺寸却不合适,并显示 2 个滚动条。如何摆脱外部滚动条?这个想法是加载任何大小的 html 并能够动态地将其适应 html 的高度。如果那个 html 更长,那么它应该只显示 1 个滚动条,而不是它当前拥有的两个。
谢谢!
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>
);
}
解决方案
在您生成的 HTML 中,修改<script>
标记以添加以下resizeIframe
函数并在文档就绪事件的末尾调用该函数:
<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>
标签更改为:
<iframe
id="widget"
name="widget"
title="widget"
scrolling="auto"
frameBorder="0"
width="100%"
srcDoc={html}
style={{ position: "relative"}}
></iframe>
推荐阅读
- html - 可以使 z-index 工作,因为它甚至应该使它们是绝对位置
- python - 当 Space = 5 时,为什么我的 Python 脚本没有运行它应该运行的代码?
- php - 使用智能优惠券创建批量优惠券 - 但对于特定类别的产品是强制性的
- sql - 对查询的一部分执行计算,然后将其添加到查询总数中
- javascript - 像 c# 中的 {get;set} 语法一样使用什么 javascript 语法?
- reactjs - Expo console.log 命令未显示其代码行位置
- spring-boot - H2控制台Spring Boot未打开
- spring-boot - 使用 Spring 数据从 EC2 实例访问 AWS DynamoDb 时失败
- python - 有没有办法找到这个按钮(如果它是一个按钮)并点击它?
- azure - 在 azure 数据工厂复制活动中,容错不适用于检查约束