Vue中嵌入原生HTML页面

最新推荐文章于 2025-04-30 11:42:46 发布

yueF_L

最新推荐文章于 2025-04-30 11:42:46 发布

阅读量4.5k

点赞数 8

分类专栏：前端大杂烩 vue 文章标签： vue.js html 前端

本文链接：https://blog.youkuaiyun.com/weixin_38982591/article/details/135937753

版权

Vue中嵌入html页面并相互通信

需求：b2b支付需要从后获取到数据放到form表单提交跳转，如下：

但是vue目前暂时没找到有类似功能相关文档，所以我采用iframe嵌套的方式

1. Vue中嵌入Html

<iframe src="/static/gateway.html" ref="iframe" width="100%" height="120%" v-show="iframeShow"></iframe>

2. Vue向html中传递数据

在data中定义一个iframe绑定的页面的对象

	iframeWin: {},

在mounted生命周期中去绑定具体Iframe的页面

this.iframeWin = this.$refs.iframe.content

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yueF_L

关注关注

8
点赞
踩
25

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue页面中嵌入html页面跨域,vue内嵌iframe并跨域通信

weixin_32142107的博客

06-03

2543

Vue组件中如何引入iframe？export default {data () {return {src: '你的src'}}}如上，直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了vue如何获取iframe对象以及iframe内的window对象？在vue中，dom操作比不上jquery的$(‘#id’)来的方便，但是也有办法，就是通过refexport de...

Vue中嵌入原生HTML页面的方法

m0_73481765的博客

02-01

3022

在Vue中嵌入原生HTML页面通常可以通过组件或页面的方式来完成。下面将详细说明如何通过组件方式实现这个功能，并提供一个简单的代码示例。

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

vue 和 html 的区别

最新发布

2404_87143740的博客

04-30

1358

简单页面或学习阶段：如果您正在构建一个简单的静态页面或刚开始学习前端开发，使用原生 HTML 是一个不错的选择。复杂交互或大型项目：对于需要组件化、响应式和高性能的复杂应用，Vue.js 提供了更强大的功能和更高的开发效率。如果计划处理大量 Excel 数据并进行复杂操作，建议使用 Vue.js 结合适当的库（如 SheetJS）来构建前端应用，以提高开发效率和用户体验。

【前端07】vue中直接嵌入html页面

Noyade的博客

05-23

1020

vue页面中引入ifraf昂me 标签，一定要注意html页面放的位置！一定要放在public里面，不然看不到。

Vue中嵌入html页面并相互通信

qq_43842093的博客

09-21

1万+

可以通过将src中修改需要展示的页面地址，这样做的好处是vue与iframe之间不需要通信，与后端的通信可以直接通过js发请求与后端进行交互。

在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的知识，

html中嵌入vue3框架模板（过滤案例）

02-10

在HTML中嵌入Vue3框架模板，是一种将强大的Vue3前端框架应用于静态页面的方法，能够实现数据绑定、组件化和动态交互。Vue3是Vue.js的最新版本，它提供了更高效、更灵活的API和性能优化，使得在HTML中集成Vue3成为...

vue与原生app的对接交互的方法(混合开发)

10-17

尤其在移动端，将Web页面嵌入原生APP中，即H5与原生APP的混合开发，已成为一种常见且实用的开发方式。使用Vue.js开发的H5项目尤其适合这种方式。本文将重点介绍在混合开发模式下，Vue如何与原生APP实现对接交互，并...

Vue中插入HTML代码的方法

12-03

我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做？一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` <p> My name is Pjee <p v-html='text'></p> </p> 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。二、渲染函数渲染函数：这是通过对VNode（虚拟DOM）的操作来生成 text()

vue 动态添加 HTML元素

06-13

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

VUE页面中加载外部HTML的示例代码

08-29

本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

qq_16785561的博客

11-21

1995

记录一下新项目集成老项目过程中产生的问题，需要vue项目实现引用HTML，并且实现vue页面可以传递数据到HTML页面，HTML页面也可以反向传递数据给vue页面。1、父页面（vue）传给子页面（html）2、子页面（html）传给父页面（vue）

Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案

朝花夕拾的博客

08-10

4562

html页面同样也要根据传递过来不同的参数去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称']（需要传递的参数）可以定义一个对象来传参这种方法就可以调用到vue里面的方法啦！html页面接收时是通过message统一接收的，针对发送多个消息的情况下，我们这里做下区分，将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，

如何在vue项目中引入html页面

热门推荐

qq_45801837的博客

11-18

6万+

在vue项目中引入html页面的两种方法第一种：/static/page.html第二种：通过iframe嵌入第一种：/static/page.html 在static或public文件夹下，新建html页面，通过/static/page.html或者/page.html即可访问第二种：通过iframe嵌入第一种方法不需要新建路由，iframe方法在正常的vue页面中内嵌一个其他的html页面，所以需要正常建立路由。 ...

Vue嵌入本地html页面

weixin_43698795的博客

05-13

1万+

问题描述：向vue项目中嵌入html页面#嵌入代码失败原因：代码结构不同，需要放到指定位置解决：把本地html、css\js\img都放到与src同级的public\static下 #嵌入代码 <template> <div style="width: 100%">  <div> <iframe src="/static/demo01.html" scrolling=

vue页面镶嵌html

积极发挥主观能动性的博客

05-12

1032

##1.关于vue项目镶嵌html 在vue页面： ```bash <template> <divid="app"> <iframesrc="/static/index.html"style="height:100%;width:100%"></iframe> </div> </template> ``` 关于html页面存放--...

vue组件中插入html页面

蜗牛~~

12-09

3303

使用iframe标签，将html页面放入static文件夹下，通过iframe的src属性访问html页面 <iframe src="../../static/test.html" frameborder="0" style="width:400px;height:400px;margin:0 auto"></iframe> 就显示成功

vue3和原生交互

03-26

<think>好的，用户的问题是关于Vue3和原生JavaScript之间的交互方法示例。我需要先理解用户的具体需求。他们可能是在开发一个混合应用，比如在Android的WebView中嵌入Vue3应用，想要实现前端与原生代码的通信。或者可能是在纯Web环境中，Vue3需要与原生的JavaScript库或API交互。首先，根据用户提供的引用，特别是引用[2]和[3]，提到了WebView和JavaScript接口的使用。这说明用户可能关注的是Vue3与Android原生之间的交互，比如通过WebView的addJavascriptInterface方法暴露原生方法给前端。不过用户的问题标题也提到“原生js”，所以可能需要涵盖更广泛的场景，包括纯JavaScript环境的交互。接下来，我需要整理几种常见的交互方式： 1. **使用全局变量或方法**：这是最直接的方式，在原生JS中定义全局函数或变量，Vue3通过window对象访问。例如，在原生JS中定义window.nativeFunction，Vue3中调用它。 2. **自定义事件**：通过浏览器的事件机制，使用CustomEvent来触发和监听事件。Vue3可以监听原生JS触发的事件，反之亦然。 3. **WebView与原生通信（Android/iOS）**：这里需要结合引用中的例子，比如Android通过addJavascriptInterface暴露接口，Vue3通过window对象调用。iOS则可能使用WKWebView的message handlers。 4. **使用postMessage进行跨框架通信**：如果Vue3应用嵌入在iframe中，可以通过postMessage与父页面通信。然后，我需要确保每个方法都有示例代码，并且符合用户提供的引用内容。例如，引用[2]提到在Android端创建JavaScript接口，Vue3通过window.webViewBridge调用。这应该包含在第三种方法中。同时，用户提供的引用[5]提到axios的封装，这可能与数据交互有关，但用户的问题更偏向于JS交互，而不是HTTP请求。所以可能需要忽略这部分，除非涉及数据交互的其他方面。还需要注意用户要求回答结构清晰，逐步解决问题，所以应该分点说明每种方法，给出代码示例，并引用相关的引用内容。最后，生成相关问题时要围绕Vue3与原生交互的扩展，比如安全性、参数传递、异步处理等。</think>### Vue3与原生JavaScript交互方式及示例 #### 一、原生JS调用Vue3方法 **实现原理**：通过Vue3暴露全局方法或对象，原生JS直接访问。 ```javascript // Vue3组件中暴露方法 import { getCurrentInstance } from 'vue'; export default { setup() { const app = getCurrentInstance(); // 将方法挂载到全局 window.vue3Methods = { showToast: (msg) => { console.log(`Vue3弹出消息: ${msg}`); } }; return {}; } } ``` ```javascript // 原生JS调用 window.vue3Methods.showToast("来自原生JS的请求"); // 输出：Vue3弹出消息: 来自原生JS的请求 ``` #### 二、Vue3调用原生JS方法 **实现原理**：原生JS预先定义全局方法，Vue3通过`window`对象访问。 ```javascript // 原生JS定义方法 window.nativeFunction = { getDeviceInfo: () => { return { os: 'Android', version: '12' }; } }; ``` ```javascript // Vue3中调用 import { onMounted } from 'vue'; export default { setup() { onMounted(() => { const info = window.nativeFunction.getDeviceInfo(); console.log(info); // 输出：{os: 'Android', version: '12'} }); } } ``` #### 三、WebView与原生交互（Android场景） 1. **Android原生暴露接口** 在Android端通过`WebView`添加JavaScript接口： ```java // Android原生代码 public class WebAppInterface { @JavascriptInterface public String getAndroidVersion() { return Build.VERSION.RELEASE; } } // WebView配置 webView.addJavascriptInterface(new WebAppInterface(), "AndroidBridge"); ``` 2. **Vue3调用原生方法** 通过`window`访问接口对象： ```javascript // Vue3中获取Android版本号 const androidVersion = window.AndroidBridge.getAndroidVersion(); console.log(`Android版本: ${androidVersion}`); // 输出：Android版本: 13 ``` > 引用[^2][^3]中均提到通过`addJavascriptInterface`实现双向通信 #### 四、自定义事件通信 **实现跨上下文通信**（如不同框架/模块间）： ```javascript // 原生JS触发事件 const event = new CustomEvent('nativeEvent', { detail: { data: '来自原生的数据' } }); window.dispatchEvent(event); ``` ```javascript // Vue3监听事件 import { onMounted, onUnmounted } from 'vue'; export default { setup() { const handleNativeEvent = (e) => { console.log(e.detail.data); // 输出：来自原生的数据 }; onMounted(() => { window.addEventListener('nativeEvent', handleNativeEvent); }); onUnmounted(() => { window.removeEventListener('nativeEvent', handleNativeEvent); }); } } ``` #### 五、注意事项 1. **安全性** 避免直接暴露敏感操作，Android需添加`@JavascriptInterface`注解限制可调用方法[^3] 2. **异步处理** Android与Vue3交互建议使用Promise封装： ```javascript // Vue3调用原生方法并异步等待结果 window.AndroidBridge.asyncGetData = () => { return new Promise((resolve) => { setTimeout(() => resolve("延迟数据"), 1000); }); }; ```