调用iframe子页面中的函数

跨域调用iframe子页面函数解决办法

最新推荐文章于 2025-11-02 16:23:19 发布

原创最新推荐文章于 2025-11-02 16:23:19 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #iframe

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文探讨如何在父页面`parent.html`中调用iframe内`child.html`的函数，遇到的跨域问题及Chrome浏览器的限制。在某些浏览器中，可以使用`window.frames['frameName']`或`document.getElementById('iframeId').contentWindow`来访问子页面函数，但Chrome会因跨域安全策略阻止此类操作，通常需调整浏览器设置或采用其他解决方案。

部署运行你感兴趣的模型镜像

调用iframe子页面中的函数

调用iframe子页面中的函数

parent.html

在父页面中，可以通过document.getElementById(id).contentWindow访问子页面，有的浏览器支持document.frames[id],
还可以直接使用name="myIFrame"中的myIFrame作为变量名访问子页面。

<!-- parent.html -->
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        var dialog;
        var dialogIframe;

        function appendToDom(html){
            try{
                var tempDom = $(html).appendTo(document.body);
                return tempDom;
            }finally{
                tempDom = null;
            }
        }
        //根据id获取iframe的contentWindow
        function getIFrame(id) {
            return (document.getElementById(id) ? document.getElementById(id).contentWindow : null)
                    || document.frames[id];
        }
        function say(){
            alert("parent.html");
        }
        function callChild(){
            // myFrame.window.say();
            // myFrame.window.document.getElementById("button").value="调用结束";
            console.log("content: ", dialog.content);
            dialog.content.say();
        }
        $(document).ready(function() {
            window.top.appendToDom("<div id='dialog_1' 'title='hello'></div>");
            dialog = window.top.$("#dialog_1");
            dialogIframe = window.top.$("<iframe id='iframe_1' src='child.html' ></iframe>").appendTo(dialog);
            dialog.content = window.top.getIFrame("iframe_1");

        });
    </script>
</head>
<body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
    <!-- <iframe name="myFrame" src="child.html" /> -->
</body>
</html>

child.html

子页面通过parent访问父页面。

<!-- child.html -->
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function say(){
            alert("child.html");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()" />
</body>
</html>