vue用iframe嵌入html文件，传参和方法调用

蒙奇·D·川

已于 2022-08-09 11:06:10 修改

阅读量3.2k

点赞数 2

文章标签： vue.js html

于 2021-05-26 11:32:27 首次发布

本文链接：https://blog.csdn.net/wxc_mangguo/article/details/117285509

版权

vue用iframe嵌入html文件，切记把html文件放入static文件夹下，不然每次调用都会是入口文件，在这里用一个简单的例子来展示一下在vue文件调用html文件的参数和方法，和一些踩坑。

vue部分

<template>
    <div>
        <iframe src="static/iframeDemo.html" name="iframeDemo" scrolling="no" style="width: 100px;height: 100px;" frameborder="0"></iframe>
        <button @click="onBtn">更改iframe的值</button>
    </div>
</template>
<script>
    export default {
        methods:{
            onBtn(){
                let iframe = window.frames['iframeDemo']
                iframe.onChangeStr('鸭梨')
            }
        }
    }
</script>

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="demo">

    </div>
</body>
<script>
    var str = "苹果";
    document.getElementById('demo').innerHTML = str
    // 更改str的值
    function onChangeStr(newStr){
        str = newStr
        document.getElementById('demo').innerHTML = str
    }
</script>
</html>

效果
点击前
点击后

注意：html文件的str变量不能用let命名，只能用var进行变量的命名，不然在vue文件下调用的时候会找不到变量（本人尝试过）

蒙奇·D·川

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
vue用iframe嵌入html文件，传参和方法调用

vue用iframe嵌入html文件，切记把html文件放入static文件夹下，不然每次调用都会是入口文件，在这里用一个简单的例子来展示一下在vue文件调用html文件的参数和方法，和一些踩坑。vue部分<template> <div> <iframe src="static/iframeDemo.html" name="iframeDemo" scrolling="no" style="width: 100px;height: 100px;"
复制链接

扫一扫