网页iframe全网页嵌套，适用于vue文件

最新推荐文章于 2023-05-31 14:34:44 发布
最新推荐文章于 2023-05-31 14:34:44 发布
阅读量288 收藏
点赞数
分类专栏： 前端 文章标签： vue web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42383283/article/details/115588608
版权 
<iframe src="http://localhost:8081/index.html" frameborder="0" 
scrolling="auto"style="width:100%;height:100%;position:absolute;"></iframe>
Nat_Jst
关注
专栏目录
前端开发：Vue中嵌套标签iframe的使用
软贱开发攻城狮
10-20 5210
前言 在前端开发过程中，往原有页面中嵌入新的页面的需求也是比较常见的需求操作，尤其是在比较复杂的必须要用嵌套的场景下。前端中使用嵌套的时候，需要用到的就是iframe标签，通过该标签可以规定一个内联框架，然后放入需要嵌套的新页面即可。本篇博文来分享一下关于iframe的使用方法，尤其是对于初级开发者来说尤为重要。 iframe 1、定义和使用 <iframe> 标签规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 2、使用说明 （1）可以把需要的文本放
在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的知识，
vue中如何通过iframe方式加载本地的vue页面
小漠007的专栏
05-31 2710
这个需求一般很少能遇到，只要说去了iframe，很多人就会唾弃。但是有时候的确无法避免使用它，当iframe的特性带来的优势远远高于自己用div模拟的时候。
关于Vue中使用iframe并进行数据通信
Litt_White的博客
08-28 2433
记录一下关于在vue中嵌套多个iframe时，如何进行vue文件和iframe的数据通信，并通过src实现动态切换不同的iframe。包括iframe使用的一些坑，例如iframe.onload不生效，iframe出现2次监听事件等问题的解决...
vue 给iframe设置src_Vue 中嵌入 iframe 并进行双向通信的完整流程
weixin_39753791的博客
12-19 2098
背景Vue 应用中，需要使用 el-dialog 弹出一个 iframe 页面，该页面来源于其他项目，这就要解决 Vue 父页面和 iframe 子页面的两个通信问题：Vue 父页面向 iframe 子页面传递初始化数据子页面的关闭按钮，需要通知父页面关闭 el-dialog本文将整理 Vue 中嵌入 iframe 并进行双向通信的完整过程。子页面直接调用父页面方法的跨域问题理论上，如果 ifr...
vue3嵌套iframe及相互通迅
最新发布
05-22
vue3嵌套iframe及相互通迅，包含vue嵌套iframe的通用组件，vue 与 iframe 相互通讯的公共方法；同时包含apache部署vue的配置文件，以及vue访问apache代理的静态html页面。 实现通过vue路由 加载第三方服务页面，实时...
使用iframe在网页中嵌入其他网页的方法
09-28
下面我们将详细讲解如何使用`iframe`在网页中嵌入其他网页的方法以及相关属性。 首先，`<iframe>` 标签的基本结构如下： ```html <iframe src="目标URL" width="宽度" height="高度" frameborder="边框" margin...
vue项目关于iframe嵌套的相关问题总结(一)
weixin_44900104的博客
03-18 9329
vue项目关于iframe嵌套的相关问题总结 因为最近做的项目涉及到项目跨项目共用页面，也就是iframe嵌套，之前对着一块也不是很了解，所以想把遇到的问题及解决办法总结一下。可能会有不严谨或者理解不周到的地方，希望读到文章的大佬能够发指出。 首先，说一下项目的需求吧，A系统要调用B系统的某个页面，并且要实现相关指定功能，具体步骤及需求如下： 在 A系统创建对应嵌套页面的路由： { path: 'MXFXYZGL_FXSJ', name: 'MXF
Vue中嵌套标签iframe的使用
xwnxwn的专栏
11-01 3万+
根据实际开发过程中的不同需求，把实战中比较常见的处理方式汇总出来，需求是做不完的，也不可能全部覆盖到，这里只分享一些比较常见的操作，方便有需要的开发者查阅使用，具体的实例如下所示。通过网页使用iframe嵌入新的网页的时候，有时需要动态处理src的值，而不是固定的值，这就需要给iframe 的src赋值，通常是使用js来实现。上面内容就是关于在前端开发中iframe的使用，较为详细的介绍了关于iframe的使用步骤，方便开发者查阅使用，其他内容就不再赘述。2.iframe使用：两种不同的嵌入新页面的方式。
通过 iframe引用的vue文件之间的方法互调
localhost_1314的博客
07-17 6987
假设有两个文件 general.vue(这是一个vue多入口生成的实例,会被打包为一个单独的general.html) generalPage.vue(这个文件通过iframe引入general.html) 那么,如何在general.vue里触发generalPage.vue中的方法vueFun? 方法如下: 1.在general.vue中通过parent.vueFun(params)...
iframe在Vue中的应用
elephant230的博客
07-11 3万+
最近写项目，遇到一个问题，那就是如何把vue项目和H5页面嵌套在一起呢？ 看似风马牛不相及，万万没想到，还有个iframe在候着呢！ 真是JS解决不了的，可别忘了还有标签呢！ 步入正题： 一、介绍： HTML 中的<iframe> 标签 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 所有浏览器都支持 <iframe> 标签。 二、使用...
在vue中嵌入iframe页面
u010227042的博客
08-21 2万+
一、嵌入iframe页面业务场景 项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。 二、iframe是什么 ifram标签规定了一个内联框架，让我们有可能在当前的HTML文档中嵌入另外一个文档，目前所有的主流浏览器都支持iframe标签，当然为了以防万一你可以在iframe标签中写入提示文本，以提示用户当前使用的浏览器不支持iframe。 <iframe
vue3中使用iframe嵌入vue2页面
Anony_me的博客
10-21 3724
vue3中使用iframe嵌入vue2页面或vue页面和iframe页面的相互传参问题
vue中嵌套页面（iframe）
热门推荐
ZFZ5720
03-08 5万+
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… &lt;iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:abso
HTML页面通过iframe嵌套Vue项目
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
11-22 4095
之前都是在Vue项目中通过iframe嵌套外部写好的HTML页，但是最近接触了一个需求，是需要在HTML页面中嵌入Vue项目。 Vue项目打包完成之后会形成一个包含所有静态资源的文件夹，点击HTML页可以运行（后端解决的跨域），现在需要新建一个test.html页去嵌套Vue打包后形成的HTML页，在test.html中有几个input框，输入完成之后点击搜索按钮，Vue项目会显示出来，同时请求了后端接口数据进行显示（接口是在Vue项目中请求的，参数是通过window.location.href获取的）。
html的iframe跨域嵌套vue项目页面，使用postMessage的方法实现父子页面传值
qq_21382609的博客
10-29 1565
当前应用场景：u3d和前端项目对接，需要使用到前端的设置页面和详情功能，需要操作前端项目的方法，比如打开vue项目的弹窗，修改详情的数据等操作，当前记录的是修改vue页面的数据操作。vue项目使用技术：vue和less编写样式，html页面使用技术：html5和javascript 使用方案：postMessage的方法 vue向iframe发送数据的方法： sendMessage(data) { //子向父发送数据 window.parent.postMessage(
iframe嵌套vue页面
05-09
总之，将Vue页面嵌套在iframe中需要注意Vue路由中的base选项、使用异步组件和处理宿主页面与iframe中Vue应用程序之间的跨域通信。这样才能确保Vue应用程序在iframe中正常渲染并与宿主页面进行通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值