同一个 origin 下，父页面可以通过 iframe.contentWindow 直接访问 iframe 的全局变量、DOM 树等，iframe 可以也通过 parent/top 对父页面做同样的事情。不同 origin 下，标准的方法是通过 .postMessage() 互相通信，不标准的方法是利用 location.hash 等奇技淫巧。协议、域名、端口号，共同决定一个 origin 。

父页面：

               
    
       
     
This is the Parent Page.
       
          
    
    
    
       
         
    

子页面：

           
    
       
     
This is the Child Page.
       
          
    

最近在写一个vue项目，关于vue项目中对iframe的操作如下

父页面：

loaded() {    const app = this.$refs.iframe.contentWindow.app    console.log(app)    if (app && app.setContent) {        app.setContent(this.xml)      } else {        window._xml = this.xml     }}

子页面：

window.app = new Vue({ ... })

在console的app信息中，我们能看到一个完整的vue实例，里面可以直接操作iframe中的一些方法和数据

或者我们可以在iframe的vue项目中直接获取父页面的值

window.app = new Vue({    el: '#app',    data() {      return {        xml: null,      }    },    created: function () {      this.setContent(window.parent.window._xml);    },    methods: {      setContent: function (xml) {        this.xml = xml;      }    }  })