3、参考文档
https://github.com/davidjbradshaw/iframe-resizer/issues/523
https://jarontai.github.io/blog/2014/07/25/use-iframe-resizer/
2、嵌入文件 statement.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.contentWindow.js"></script>
</head>
<body>
<div>111111</div>
<div>111111</div>
<div>111111</div>
<!-- ... -->
</body></html>
注：引入 jquery.js
iframeResizer.contentWindow.js
不需做任何配置
3、主文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.contentWindow.js"></script>
</head>
<body>
<iframe id="iframe" scrolling="no" style="border: 0px;overflow-y: scroll;" frameborder="0" width="100%" src="statement.html"></iframe>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/iframe-resizer/4.1.1/iframeResizer.js"></script>
<script type="text/javascript">
iFrameResize({
log: true, // Enable console logging
inPageLinks: true,
})
</script>
</body>
</html>
注：script的位置 在body内最后，试发现在head内没效果
4、更多使用
见官方文档 示例 两个页面通讯问题
5、与vue整合
vue 引入iframe-resizer与引入jquery类似 参考
\build\webpack.base.conf.js
module.exports = {
...
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({ /*可以不用jquery*/
jQuery: "jquery",
$: "jquery"
}),
new webpack.ProvidePlugin({
resizer: "iframe-resizer", /*package.json中的名称*/
}),
]
}
main.js中导入
import resizer from 'iframe-resizer'
组件中使用
mounted () {
console.log('mounted')
console.log(" this.$refs.iframe", this.$refs.iframe)
resizer.iframeResizer({log: true,}, this.$refs.iframe)
}
网友评论