用Vue制作Iframe，轻松修改样式，隐藏滚动条

2024-01-18 09:47:29

最近有空，就抽空把以前做过的公司业务组件慢慢抽离出来做成插件，也算是对近年来的技术方面做一个总结吧。今天要写的是一个用vue-jsx封装的iframe插件，可修改iframe中的样式，隐藏滚动条，默认设置保证页面安全等功能。不想看想直接使用的话请前往项目处pikaz-iframe

对于前端开发人员而言，经常会遇到需要在自己的页面中嵌套其他页面的情况。这时，iframe 就成为了最常用的解决方案。但是，使用 iframe 时也经常会遇到一些问题，例如：

iframe 中的样式与父页面不一致，导致页面布局混乱
iframe 中的滚动条无法隐藏，影响页面美观
iframe 中的页面安全性无法保证，容易受到 XSS 攻击

针对这些问题，本文介绍了一款使用 Vue 制作的 Iframe 插件，可以轻松修改 iframe 中的样式，隐藏滚动条，并保证页面安全。

使用方法

该插件的使用方法非常简单，只需在 Vue 项目中安装并注册即可。

npm install pikaz-iframe

import { PikazIframe } from 'pikaz-iframe'

Vue.use(PikazIframe)

然后，在 Vue 组件中就可以使用 <pikaz-iframe> 标签来嵌入 iframe 了。

<pikaz-iframe src="https://example.com"></pikaz-iframe>

属性

<pikaz-iframe> 标签支持以下属性：

src ：iframe 的来源 URL
style ：iframe 的样式对象
class ：iframe 的 CSS 类名
scrolling ：是否显示 iframe 的滚动条，可选值有 "auto", "yes", "no"
sandbox ：iframe 的沙箱属性，可以限制 iframe 中的页面对父页面的访问，可选值有 "allow-scripts", "allow-same-origin", "allow-popups", "allow-forms"
allowfullscreen ：是否允许 iframe 中的页面全屏显示

事件

<pikaz-iframe> 标签支持以下事件：

load ：iframe 加载完成后触发
error ：iframe 加载失败时触发

示例

以下是一个使用该插件的示例：

<template>
  <pikaz-iframe
    src="https://example.com"
    style="width: 100%; height: 100%;"
    scrolling="no"
    sandbox="allow-same-origin"
  ></pikaz-iframe>
</template>

<script>
import { PikazIframe } from 'pikaz-iframe'

export default {
  components: { PikazIframe },
}
</script>