vue使用iframe方法

12月06日更新版本

父级元素内内容：

父级元素内内容：

<template>

    <div class="page2-wrap">
      <h2>vue使用iframe</h2>
       <iframe width="600" height="600" ref="iframe" src="../../../static/child.html" @load="loaded">            </iframe>
    </div>

</template>

<script type="text/javascript">

  export default {
    name: 'page2',
    data() {
      return {
        dialogVisible: false,
        word: [
                        {
                            name: "板栗",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "枣",
                            value: 20,
                            itemStyle: {
                               normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "葡萄",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "山楂",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "香菇",
                          
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                      
                                }
                            }
                        },
                        {
                            name: "苹果",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "核桃",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "马铃薯",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "南瓜",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "葫芦",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "西红柿",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "萝卜",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        }
                    ]
      };
    },
    mounted(){
     
    },
    methods: {
        loaded(){
          //console.log(this.$refs.iframe.contentWindow.keyWords)
  //父元素调用子元素的方法
          var sss = this.$refs.iframe.contentWindow.keyWords;
           sss(this.word)
           console.log(this.word)
        }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~assets/css/variable";
  @import "~assets/css/mixin";
  #app{
    width: 100%;
    height: 100%;
  }
  .page2-wrap{
    width: 100%;
    height: 100%;
  }
</style>

子级元素内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键词云</title>
    <style>
        #myChart{width:540px;height:310px;}
    </style>
    <script src="echarts-all-2.js"></script>

</head>
<body>
<div id="myChart"></div>
<script type="text/javascript" src="./vue.min.js"></script>
<script>
window.vm = new Vue({
    name:'child',
    
});
    function keyWords(datas){
        console.log(datas)
        var arr = [];
        datas.forEach(function(v,i){
            arr.push({
                itemStyle:v.itemStyle,
                name: v.name,
                value:v.value
            });
        });
        var myChart = echarts.init(document.getElementById('myChart'));
            myChart.setOption({
                        tooltip: {
                            show: true
                        },
                        series: [{
                            name: 'Google Trends',
                            type: 'wordCloud',
                            size: ['100%', '100%'],
                            textRotation : [0, 0, 0, 0],
                            textPadding:15,
                            autoSize:{
                                "enable": true,
                                "minSize": 14
                            },
                            data: arr
                        }] 

            });
    }


</script>
</body>
</html>

主要参考点：

<iframe width="600" height="600" ref="iframe" src="../../../static/child.html" @load="loaded">

1、父级使用iframe，需要使用@load绑定加载完毕要执行的函数

2、父元素获取iframe的内容

iframe.contentWindow//获取iframe的window对象
iframe.contentWindow.document//获取iframe的document
iframe.contentWindow.documentElement//获取iframe的html
iframe.contentWindow.head//获取head
iframe.contentWindow.body//获取body
iframe.contentWindow.方法名//获取iframe子页面定义的全局方法

如上述例子所示

方法一（子元素不用vue）

父元素获取子元素方法

var sss = this.$refs.iframe.contentWindow.keyWords;
       sss(this.word)

子元素声明一个函数

function keyWords（datas）{}

方法二

父元素获取子元素方法

var sss = this.$refs.iframe.contentWindow.vm.keyWords;
sss(this.word)

子元素声明一个函数(子元素用vue)

window.vm = new Vue({
name:’child’,
methods:{
keyWords(){
}
}

});