基于vue封装的一个iframe插件
- 带有默认设置，方便使用iframe，可设置是否隐藏滚动条,修改传入的HTML内容样式等。
yarn add pikaz-iframe
npm i -S pikaz-iframe<pikaz-iframe :setting="setting" @onload="onload">
</pikaz-iframe>.vue file:
import {PikazIframe} from 'pikaz-iframe'
...
export default {
components: {
PikazIframe,
},
data () {
return {
setting:{
src: "https://m.baidu.com/"
},
onload: ()=> {
console.log("载入成功")
}
}
}
...| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| frameborder | 是否显示框架周围的边框 | number | 0/1 | 0 |
| sandbox | 启用iframe中内容的额外限制,传入空字符串则对所有权限做限制，具体查看MDN-iframe | string | ""/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation等 | 传入src时默认为"allow-same-origin allow-scripts"，传入srcdoc时默认为"allow-scripts" |
| src | 被嵌套的页面的 URL 地址 | string | -- | -- |
| srcdoc | html内容 | string | -- | -- |
| hideScrolling | 是否隐藏滚动条，传入true默认隐藏18px宽的滚动条，如需隐藏其他宽度滚动条，则传入宽度如"20px" | boolean/string | -- | false |
| css | 传入html内容时，需修改的css样式，如"div{color:red;}" | string | -- | -- |
| 更多设置选项请查看MDN-iframe |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| onload | iframe加载完成时触发 | -- |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent