Alternatives and detailed information of pikaz-iframe

🥇 A super small, super efficient library that helps you lazy load everything like images, video, audio, iframe as well as stylesheets, and JavaScript.

Stars: ✭ 138 (+155.56%)

Mutual labels: iframe

Node Iframe Replacement

An alternative to sticking that lovely web app you just built into an <iframe> on a corp website

Stars: ✭ 37 (-31.48%)

Mutual labels: iframe

React Native Youtube Iframe

A wrapper of the Youtube-iframe API built for react native.

Stars: ✭ 221 (+309.26%)

Mutual labels: iframe

Paypal Checkout Components

Javascript Integration for PayPal Button and PayPal Checkout

Stars: ✭ 938 (+1637.04%)

Mutual labels: iframe

Btabs

A jQuery plugin open pages in tab, based on Bootstrap2,3

Stars: ✭ 124 (+129.63%)

Mutual labels: iframe

post-messenger

👶 ~1 Kb wrapper of window.postMessage for cross-document communication.

Stars: ✭ 28 (-48.15%)

Mutual labels: iframe

Lazyframe

🛀🏽 Dependency-free library for lazyloading iframes

Stars: ✭ 237 (+338.89%)

Mutual labels: iframe

Iframe Resizer React

The official React interface for Iframe-Resizer

Stars: ✭ 183 (+238.89%)

Mutual labels: iframe

View All Similar Projects ➔

Introduction

基于vue封装的一个iframe插件

Features

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

Installation

With npm or yarn

yarn add pikaz-iframe

npm i -S pikaz-iframe

For Vue-cli

<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("载入成功")
            }
          }
        }
  ...

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
css	传入html内容时，需修改的css样式，如"div{color:red;}"	string	--	--
更多设置选项请查看MDN-iframe

Events

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

pikaz-18 / pikaz-iframe

Programming Languages

Labels

Projects that are alternatives of or similar to pikaz-iframe

Introduction

Features

demo

demo代码

Installation

With npm or yarn

For Vue-cli

setting参数:

Events