跨域的请跨下，父窗口与子窗口是无法相互访问并通信的。
非跨域的请跨下：
<div class="parentWindow" ref="parentWindow">
<iframe src="https://www.jianshu.com/" id="iframe" scrolling-y="no" scrolling-x="no" frameborder="0" style="width:100%;min-height:100%;" ref="iframe"></iframe>
</div>
1、父窗口访问子窗口并操作样式
访问子窗口：
document.getElementById('iframe').contentWindow
window.frames[0] 或者 window.frames["iframe_Name"]
通过iframe的name直接获取子窗口的window对象 iframe_Name.window // window可以省略
操作样式：document.getElementById('iframe').contentWindow.document.body.background='#ffffff"
监听子窗口的加载情况:
if (window.attachEvent) {//IE10及以前版本
document.getElementById('iframe').attachEvent('onload', function () {
mini.alert('IE');
});
} else if (window.addEventListener) {//所有主流浏览器除了IE10及以前版本
document.getElementById('iframe').addEventListener('load', function () {
mini.alert('ss');
});
}
2、子窗口访问父窗口
访问父窗口：window.parent或者window.top
操作样式：window.parent.document.body.background='#ffffff'
parant.html
<div id="app">
<div class="parentWindow" ref="parentWindow">
<iframe src="./iframe.html" id="iframe" scrolling-y="no" scrolling-x="no" frameborder="0" style="width:100%;min-height:100%;" ref="iframe"></iframe>
<button @click="sendMsg" value="sendMsg">Click Me!</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
mounted() {
// console.log(window.document)
// console.log(this.$refs.iframe.contentWindow)
// console.log(this.$refs.iframe.contentWindow.document)
},
methods:{
sendMsg(){
console.log(this.$refs.iframe.contentWindow.document.getElementById('text').value)
this.$refs.iframe.contentWindow.document.getElementById('text').value = 'test';
}
}
})
</script>
iframe.html
<div id="app">
<input type="text" placeholder="请输入" id="text" value="te"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
mounted() {
console.log(window.parent.document)
// console.log(this.$refs.iframe.contentWindow)
// console.log(this.$refs.iframe.contentWindow.document)
}
})
</script>
温馨提示：本地文件直接打开预览，使用的是文件协议，会报如下错误(域为空)，放到服务器中预览即可。
