直接看代码吧
.js文件
import weather from './weather' //引入下面weather.js文件
const IndexView = () =>{
return (
<iframe
style={{marginTop: "-0.3vh"}}
width="100%"
scrolling="auto"
height="100%"
frameBorder="0"
marginWidth={0}
// marginHeight={0}
// src="http://127.0.0.1:5500/%E5%A4%A9%E6%B0%94%E5%86%85%E5%B5%8C.html"
srcDoc={weather}
>
</iframe>
)
}
export default IndexView
新建一个weather.js文件 编写如下代码
weather.js 就是一个html 结构
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- wrather -->
<div id="weather-view-he"></div>
<script>
WIDGET = {
ID: 'WkDgnrpi4W'
};
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/view/static/js/r.js?v=1111"></script>
</body>
</html>`
export default html //把html结构公开出去 在需要的地方引入