Introduction

基于vue封装的一个iframe插件

Features

• 带有默认设置，方便使用iframe，可设置是否隐藏滚动条,修改传入的HTML内容样式等。

demo

demo代码

Installation

With npm or yarn

yarn add pikaz-iframe

npm i -S pikaz-iframe

For Vue-cli

<pikaz-iframe :setting="setting">
</pikaz-iframe>

.vue file:

  import {PikazIframe} from 'pikaz-iframe'
  ...
  export default {
        components: {
            PikazIframe,
        },
        data () {
          return {
            setting:{
              src: "https://m.baidu.com/",
              onload: ()=> {
                console.log("载入成功")
              }
            }
          }
        }
  ...

setting参数:

参数|说明|类型|可选值|默认值 -|-|-|-|- 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 onload|iframe加载完成时的钩子|funtion|--|-- css|传入html内容时，需修改的css样式，如"div{color:red;}"|string|--|-- 更多设置选项请查看MDN-iframe

Events

事件名称|说明|回调参数 -|-|- onload|iframe加载完成时触发|--