vue中嵌套页面（iframe）

最新推荐文章于 2025-06-30 17:16:30 发布

转载最新推荐文章于 2025-06-30 17:16:30 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/caoxueying2018/p/9732563.html

文章标签：

#javascript #前端 #ViewUI

本文详细介绍如何在Vue项目中嵌套iframe，并分享了将目标文件置于static目录下的技巧。文章解释了src属性的使用方法，包括相对路径及服务器根路径的设定。同时，强调了width、height属性设置的重要性，以及scrolling属性对于滚动条显示的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中嵌套iframe,将要嵌套的文件放在static下面。(要将打包文件整体放在statici里,我的文件名是canvas）

src可以使用相对路径，也可使用服务器根路径http:localhost:8088/…

<iframe src="../../static/canvas/无标题-1_HTML Canvas.html" width="1200" height="300" frameborder="0" scrolling="auto" style="
position:absolute;top: -300px;left: 0px;">

</iframe>

width和height需要设置，否则就没有了宽高，页面出不来。
scrolling设置滚动条，如果不要滚动条，值设置为no.
注意src引入的是html文件

转载于:https://www.cnblogs.com/caoxueying2018/p/9732563.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33862514

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端开发：Vue中嵌套标签iframe的使用

全沾软贱开发攻城狮

10-20

1万+

前言在前端开发过程中，往原有页面中嵌入新的页面的需求也是比较常见的需求操作，尤其是在比较复杂的必须要用嵌套的场景下。前端中使用嵌套的时候，需要用到的就是iframe标签，通过该标签可以规定一个内联框架，然后放入需要嵌套的新页面即可。本篇博文来分享一下关于iframe的使用方法，尤其是对于初级开发者来说尤为重要。 iframe 1、定义和使用 <iframe> 标签规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 2、使用说明（1）可以把需要的文本放

vue --使用 iframe 嵌入页面

King Saj

12-11

1671

<template> <div v-loading="loading" :style="'height:'+ height"> <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> </div> </template> <script> export default { name: "Swagg

参与评论您还未登录，请先登录后发表或查看评论

在vue中实现嵌套页面(iframe)

11-19

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题此文是建立在vue-cli之上，当然单写也可以，下文会涉及一些关于cli的知识，

iframe嵌套 redirect中转页面 route跳转

最新发布

qq_41910413的博客

06-30

260

项目A通过iframe嵌套项目B的多个页面时，为解决不同页面路径和参数的问题，项目B实现了一个中转方案。核心思路是：1)在项目B中创建/redirect/:path*路由，匹配任意路径；2)redirect.vue组件获取当前路由参数后，重定向到目标路径；3)App.vue监听路由变化，将所有请求先跳转到/redirect路径。该方案通过路由重定向实现了对嵌套页面的统一管控，解决了多页面、多参数的iframe嵌套问题，代码简洁高效。

前端开发：Vue中嵌套标签iframe的使用，在线前端开发学习

qinglp的博客

04-05

4442

if (w &&!2.iframe使用：两种不同的嵌入新页面的方式3.iframe使用：直接设置嵌入新页面链接的方式最后上面内容就是关于在前端开发中iframe的使用，较为详细的介绍了关于iframe的使用步骤，方便开发者查阅使用，其他内容就不再赘述。以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！

vue3嵌套iframe及相互通迅

05-22

vue3嵌套iframe及相互通迅，包含vue嵌套iframe的通用组件，vue 与 iframe 相互通讯的公共方法；同时包含apache部署vue的配置文件，以及vue访问apache代理的静态html页面。实现通过vue路由加载第三方服务页面，实时...

Vue组件中实现嵌套页面（iframe）功能

06-30

在 Vue.js 开发中，利用 iframe 实现嵌套页面是一种常见方式。iframe 能在 Vue 应用里嵌入独立 HTML 文档，适用于展示第三方内容、实现特定功能或处理复杂交互场景。在 Vue 中使用 iframe，只需在模板插入 iframe ...

在vue中嵌入iframe页面

u010227042的博客

08-21

2万+

一、嵌入iframe页面业务场景项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。二、iframe是什么 ifram标签规定了一个内联框架，让我们有可能在当前的HTML文档中嵌入另外一个文档，目前所有的主流浏览器都支持iframe标签，当然为了以防万一你可以在iframe标签中写入提示文本，以提示用户当前使用的浏览器不支持iframe。 <iframe

vue嵌入第三方页面

qq_53793319的博客

09-14

2190

在 Vue 中嵌入第三方页面有几种常见的方法。

vue下iframe标签页,切换标签页,iframe不重载

12-05

vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次$store。思路很关键，看懂了可复用，熟悉vue的朋友酌情下载。

【vue】内嵌第三方网页

小菜张的博客

03-29

9014

内嵌其他网页

VUE使用 iframe 嵌入网页

lilylry的博客

08-11

1万+

但若嵌入的网页是第三方网页，对方的操作可能存在安全风险。为了限制的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。问题：容器云嵌入该工程时使用iframe嵌入，嵌入的路径是动态的，路由的代理会产生问题，运维功能嵌入其他平台时，路径也是动态的同样也需要配置。

vue 中使用iframe内嵌页面并通信

Marzlam的博客

03-09

902

vue与iframe通信

vue如何内嵌网页

Study123wf的博客

07-20

3159

参考链接:https://m.php.cn/faq/536004.htmlA项目打开。

Vue中嵌套标签iframe的使用