Vue添加第三方页面

发表于 更新于 分类于 阅读次数：
本文字数： 757 阅读时长 ≈ 1 分钟
在vue组件中通过iframe或object标签插入第三方页面

前言

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

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

正文

第三方页面如下：

操作

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

iframe

通过iframe标签添加

1
2
3
4
5
<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标签添加

1
2
3
4
5
<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链接就好。

相关文章