全面兼容的Iframe 与父页面交互操作

最新推荐文章于 2024-08-14 09:30:44 发布

追夢秋陽

最新推荐文章于 2024-08-14 09:30:44 发布

阅读量1w

点赞数 2

分类专栏： Web前端技术文章标签： iframe 交互元素脚本嵌入

本文链接：https://blog.csdn.net/yimiyuangguang/article/details/20250285

版权

Web前端技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

全面兼容的Iframe 与父页面交互操作

父页面 Father.htm 源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>全面兼容的Iframe 与父页面交互操作</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
        function fatherFunction() {
            alert("我是父页面的方法,\n调用成功！");
        }

        /*
        *父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容
        */
        function one() {
            var ifreame = window.frames["childPage1"];
            if (ifreame != null && ifreame != undefined) {
                ifreame.childFunction();
            }
        }

        function two() {
            var ifreame = window.frames["childPage1"];
            if (ifreame != null && ifreame != undefined) {
                var myValue = ifreame.document.getElementById("childPage");

                alert(myValue.innerHTML);
            }
        }


        /*
        *父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容
        */
        function three() {
            var ifreame = window.top.document.getElementById("childPage2").contentWindow;
            if (ifreame != null && ifreame != undefined) {
                ifreame.childFunction();
            }
        }

        function four() {
            var ifreame = window.top.document.getElementById("childPage2").contentWindow;
            if (ifreame != null && ifreame != undefined) {
                var myValue = ifreame.document.getElementById("childPage");

                alert(myValue.innerHTML);
            }
        }
    </script>
</head>
<body style="margin: auto;">
    <fieldset>
        <legend>父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容</legend>
        <dl>
            <dt>
                <input type="button" value="通过ifrme Name 调用子页面的脚本" οnclick="one();" />    
                <input type="button" value="通过ifrme Name 获取子页面元素的内容" οnclick="two();" />
            </dt>
            <dt>
                <div style="width: 100%; height: 250px;">
                    <iframe name="childPage1" src="Child1.htm" frameborder="0" scrolling="no" width="100%"
                        height="250"></iframe>
                </div>
            </dt>
        </dl>
    </fieldset>
    <br />
    <fieldset>
        <legend>父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容</legend>
        <dl>
            <dt>
                <input type="button" value="通过ifrme Id 调用子页面的脚本" οnclick="three();" />    
                <input type="button" value="通过ifrme Id 获取子页面元素的内容" οnclick="four();" />
            </dt>
            <dt>
                <div style="width: 100%; height: 250px;">
                    <iframe id="childPage2" src="Child2.htm" frameborder="0" scrolling="no" width="100%"
                        height="250"></iframe>
                </div>
            </dt>
        </dl>
    </fieldset>
</body>
</html>

嵌入的 iframe 子页面 Child1.htm 源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>全面兼容的Iframe 与父页面交互操作</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript">
        function childFunction() {
            alert("我是子页面,\n我需要使用 Iframe Name 调用！");
        }
    </script>
</head>
<body style="margin: auto; background-color: Gray; color: Red;">
    <input type="button" value="调用父页面的脚本" οnclick="javascript:window.parent.fatherFunction();" /><br />
    <div id="childPage">
        我是子页面,我需要使用 Iframe Name 调用！</div>
</body>
</html>

嵌入的 iframe 子页面 Child2.htm 源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>全面兼容的Iframe 与父页面交互操作</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" language="javascript">
        function childFunction() {
            alert("我是 iframe 嵌入的子页面，\n需要通过 Iframe Id 调用！");
        }
    </script>
</head>
<body style="margin: auto; background-color: Gray; color: Red;">
    <input type="button" value="调用父页面的脚本" οnclick="javascript:window.parent.fatherFunction();" /><br />
    <div id="childPage">
        我是 iframe 嵌入的子页面，需要通过Id调用！
    </div>
</body>
</html>

扩充：

调用iframe父页面的方法：

window.parent.jBox.tip("异常，请重试！");

效果图如下：