vue中使用iframe

最新推荐文章于 2025-06-16 11:42:23 发布

转载最新推荐文章于 2025-06-16 11:42:23 发布 · 2.1w 阅读

10 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bf18a046fb9a049a81ee980

文章标签：

#javascript #json #前端 #ViewUI

一、iframe是什么

iframe就是我们常用的iframe标签：iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。

二、iframe的用法

首先需要了解iframe标签的写法，和大多HTML标签写法相同，iframe标签输入形式为： < iframe >和< /iframe >。以< iframe >开头，以< /iframe >结尾，将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。

 <iframe width=400 height=300 frameborder=0 scrolling=auto src=URL></iframe>
 //  width插入页的宽；height插入页的高；scrolling 
 // 是否显示页面滚动条（可选的参数为auto、yes、no，如果省略这个参数，则默认为auto）；
 // frameborder  边框大小；
复制代码

三、vue中嵌入iframe (demo)

在vue中嵌入iframe，并用监听的方式实现vue页面与iframe页面之间的数据绑定

index.html
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
</head>
<body>
<div class="app">
    <div>
        <p>假设这里是配置，随便输入点东西</p>
        <input type="text" v-model="text">
    </div>

    <div>
        <p>这里是生成的最终HTML</p>
    </div>
    <textarea id="html-content" cols="30" rows="10" v-model="html"></textarea>
</div>

<p>显示的iframe</p>
<iframe id="other-iframe" src="./other.html"></iframe>
 <!--嵌入的页面-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
    new Vue({
    	el: '.app',
    	data: {
    		text: "",
    		html: "",
    	},
    	// 监听text变量
    	watch: {
    	text: function (newValue) {
        	let iframeWindow = document.querySelector("#other-iframe").contentWindow;
        	let config = {
                    text: this.text
        	};
        
        	iframeWindow.setConfig(config);
        	this.html = iframeWindow.getHtml(`window.baseConfig = ${JSON.stringify(config)};`);
        },
    	}
    });
</script>
</body>
</html>
复制代码


<!--other.html-->
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="innerText">{{ config.text }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
    // -- data inner start -- //
    let html = "<!doctype html>\n" + document.querySelector("html").outerHTML;
    // 通过注释信息来区分开始与结束
    let start = html.indexOf("// -- data inner" + " start -- //");
    let end = html.indexOf("// -- data inner" + " end -- //", start) + 26;
    // 获取html
    function getHtml(injectCode) {
        if (!injectCode) injectCode = "";
        return html.substring(0, start) + injectCode + html.substring(end)
    }
    // -- data inner end -- //
    new Vue({
        el: '.app',
        data: {
            config: {
                text: ""
            }
        },
        created: function () {
            if (window.baseConfig) {
                this.$set(this, "config", window.baseConfig);
            } else {
                window.setConfig = (newConfig) => {
                    this.$set(this, "config", newConfig);
                }
            }
            document.querySelector("body").style.visibility = "visible";
        }
    });
</script>
</body>
</html>
复制代码

复制代码