vue 3.0使用 iframe 标签引入本地HTML页面，并实现数据交互

文章目录

1. 问题总结

最近在做vue的项目时候，需要引入本地html页面，中间遇到了很多问题，费时又费力，因此记录下来，以备不时之需，也给大家提供点资料。

2. vue中引入html页面

使用ifram标签直接引用对应的html，代码如下：

<iframe src="/static/b.html" width="100%" height="100%" ref="iframeDom">iframe>
1

src路径的问题 + js动画加载的问题： （非常重要）

本地的html：一定要将用到的html页面放在public文件夹下的static内，如果没有static文件夹，就自己新建一个。
如果是网络页面，src直接网址写全就行，如：‘https://www.baidu.com’。
如果再html中需要引入外部的css或者js,这些js和css也必须在public文件夹下。

如图：在这里插入图片描述

我这里是新建了一个js_css文件夹，然后把html中所用的文件放在了里面，在html中引用这些js或者css文件的话如下：

<link rel="stylesheet" type="text/css" href="js_css/pviz-core.css">
<script src="js_css/pviz-bundle.min.js">script>
1
2

3. vue向html传递数据

vue中的写法
注意：this.$refs.iframeDom.contentWindow 中的iframeDom一定是iframe标签中的ref属性所对应的值。

<template>
    <div class="main">
        <button @click="vueSendMsg">vue向iframe传递信息button>
        <iframe src="/static/b.html" width="100%" height="100%" ref="iframeDom">iframe>
    div>
template>

<script>
export default {
    name: 'FAQ',
    data() {
        return {
            data_: '哈哈哈，我----过去啦'
        }
    },
    methods: {
        // vue向iframe传递信息
        vueSendMsg() {
        //这里的ifranmeDom 对应 iframe标签中的ref属性的值 （ref="iframeDom"）
            const iframeWindow = this.$refs.iframeDom.contentWindow;
            iframeWindow.postMessage({
                cmd: 'myVue',
                params: {
                    info: this.data_,   //需要传递的数据
                }
            }, '*')
        },
    }
}
script>


<style scoped>
.main {
    display: block;
    width: 100%;
    height: 600px;
}

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

iframe引入的html中的写法：

<html>

<head>
    <title>pViz cuslivingstone display exampletitle>
    <link rel="stylesheet" type="text/css" href="js_css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="js_css/pviz-core.css">
    <script src="js_css/pviz-bundle.min.js">script>
    <style type="text/css" media="screen" class="example">
    style>
head>

<body class="container">
    <div class="row">
        <h2>pViz custom display with css exampleh2>
    div>
    <h3>iframe嵌入的页面h3>
    <script class="example">
        window.addEventListener("message", function (event) {
            var data = event.data;
            // 然后就可以获得vue传过来的数据
            console.log("从vue中获得的数据", data);
        }, '*')
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

4. html向vue传递数据

暂时没用到—后续更新

相关阅读:
大家都在用MySQL count(*)统计总数，到底有什么问题？
华为机试真题 C++ 实现【数据分类】
BrakTooth安全漏洞可劫持蓝牙设备
旅游住宿酒店14页
ClickHouse引擎之-MaterializeMYSQL
基于nodejs+python+vue的在线动漫信息网站
Node 之 JavaScript 模块化开发
什么是工作流开源框架？可提高办公效率吗？
【Python】-- 模块、包（导入模块、自定义模块、自定义包、安装第三方包）
【编程题动态规划】把数字翻译成字符串（详细注释易懂）

原文地址：https://blog.csdn.net/hac_kill_you/article/details/130831004