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>
複製代碼