父页面代码
index.html
<body>
<iframe id="frame" name="frame" src="child.html" frameborder="0"></iframe>
<button onclick="callChild()">调用子页面方法cadd</button>
<script>
function fadd() {
console.log('fadd function')
}
function callChild() {
frame.cadd()
}
</script>
</body>
子页面代码
child.html
<body>
<h3>我是子窗口内容</h3>
<button id="btn" onclick="callIndex()">调用index页面fadd</button>
<script>
function callIndex() {
parent.fadd()
}
function cadd(){
console.log('cadd function')
}
</script>
</body>
注意
直接在浏览器访问,会报下面错误,是因为跨页面操作涉及域的概念。
child.html:15 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame