Vue添加第三方页面

花猪

发布于 2022-04-14 15:36:57

2.8K0

文章被收录于专栏：花猪的学习记录花猪的学习记录

前言

项目需求，需要在vue组件中添加第三方页面。

注：本文主要说明本地第三方页面的添加

正文

第三方页面如下：

操作

首先在Vue项目的public目录中新建static文件夹，在其中存放第三方页面。

iframe

通过iframe标签添加

<template>
    <div class="network_container">
        <iframe class="network_show" name="content_frame" src="/static/network.html" frameborder=0  scrolling="no"></iframe>
    </div>
</template>

object

通过object标签添加

<template>
    <div class="network_container">
        <object class="network_show" type="text/x-scriptlet" data="/static/network.html"></object>
    </div>
</template>

效果如下：

注意：这里通过CSS修改了其样式

注意

可以通过添加scrolling="no"属性消除第三方页面的滚动条
需要在外部包裹一个<div>标签
路径需要填写项目“绝对”路径（../会出现问题）

后记

如果要添加在线第三方页面，直接在路径中添加url链接就好。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-12，如有侵权请联系 cloudcommunity@tencent.com 删除

html

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

vue.js

登录后参与评论

0 条评论

热度

Vue添加第三方页面

Vue添加第三方页面

前言

正文

操作

iframe

object

注意

后记

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐