iframe 的属性 :HTML <iframe> 标签 | 菜鸟教程
import React, { Component } from 'react'
import { Menu } from 'antd';
import 'antd/dist/antd.css';
import './index.css'
export default class Detail extends Component {
constructor(){
super();
this.state={
};
}
render() {
let real = `https://www.csdn.net/`
let history = `https://juejin.cn/`
return (
<div>
<div className='main_left'>
<Menu>
<Menu.Item><a href={real} target="iframe_a" >CSDN</a></Menu.Item>
<Menu.Item><a href={history} target="iframe_a">掘金</a></Menu.Item>
</Menu>
</div>
<div className='main_right'>
<iframe src={real} target="iframe_a" name="iframe_a" frameBorder="0" width="90%" height="1000" >
</iframe>
</div>
</div>
)
}
}
.main_left {
width: 10%;
height: 100%;
float: left;
padding-top: 20px;
cursor: pointer;
}
.main_left ul {
width: 144px !important;
}
.main_left ul li {
width: 144px !important;
list-style: none;
}
.main_left li a {
display: block;
width: 144px;
height: 40px;
text-align: center;
line-height: 40px;
}
.main_left li a::before {
width: 120px;
}
.main_right {
float: left;
width: 90%;
height: 100%;
}
.main_right iframe {
width: 100%;
height: calc(100vh - 72px);
}