iframe 中父子窗口方法相互调用

最新推荐文章于 2024-07-22 08:55:10 发布

Aibac

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量75

点赞数

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/u013355529/article/details/114962050

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

父页面代码

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Aibac

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
iframe 中父子窗口方法相互调用

父页面代码index.html<body> <iframe id="frame" name="frame" src="child.html" frameborder="0"></iframe> <button onclick="callChild()">调用子页面方法cadd</button> <script> function fadd() { console.log
复制链接

扫一扫