vue中使用iframe

时间 2019-12-08

标签 vue 使用 iframe 栏目 HTML 繁體版

原文原文链接

1、iframe是什么

iframe就是咱们经常使用的iframe标签：iframe标签是框架的一种形式，也比较经常使用到，iframe通常用来包含别的页面，例如咱们能够在咱们本身的网站页面加载别人网站或者本站其余页面的内容。iframe标签的最大做用就是让页面变得美观。javascript

2、iframe的用法

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

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

3、vue中嵌入iframe (demo)

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

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>
复制代码

复制代码