项目需求,需要在vue组件中添加第三方页面。
注:本文主要说明本地第三方页面的添加
第三方页面如下:
首先在Vue项目的public
目录中新建static
文件夹,在其中存放第三方页面。
通过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
标签添加
<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链接就好。