JavaScript实现内嵌的iframe跨域调用父页面js方法

最新推荐文章于 2022-09-08 10:51:15 发布

ChinaLzw

最新推荐文章于 2022-09-08 10:51:15 发布

阅读量1.3w

点赞数 3

分类专栏： javascript

本文为博主原创文章，只为分享而编，欢迎各位学习以及转载。

本文链接：https://blog.csdn.net/qq285679784/article/details/73088152

版权

javascript 专栏收录该内容

125 篇文章 2 订阅

订阅专栏

源码下载

功能说明：http://www.yf3.com/admin.html嵌套页面http://www.yf4.com/customer.html，http://www.yf4.com/customer.html调用http://www.yf3.com/admin.html中的js方法，在http://www.yf3.com/admin.html中创建菜单

http://www.yf3.com/admin.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>MAIN：www.yf3.com</title>

    <script type="text/javascript">

        // main js function
        function f_addTab(tabid, tabname, url) {
            var nav = document.getElementById("nav");
            nav.innerHTML = (nav.innerHTML + "tabid：" + tabid + ", tabname：" + tabname + ", url：" + url + "<br/>");
            //alert('MAIN站点菜单新增成功！');
        }
  </script>

</head>
<body>
    <p>MAIN：www.yf3.com</p>
    <div id="nav">
    </div>
    <iframe src="http://www.yf4.com/customer.html" name="framecenter" width="520" height="520">
    </iframe>
</body>
</html>

http://www.yf3.com/common.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Main Common</title>
</head>
<body>

    <script type="text/javascript">
        var method = GetQueryString("method");
        switch (method) {
            case 'f_addTab':
                var tabid = GetQueryString("tabid"); var tabname = decodeURI(GetQueryString("tabname")); var url = decodeURI(GetQueryString("url"));
                alert(tabid);
                parent.parent.f_addTab(tabid, tabname, url); // execute main function
                break;
            default:
                alert("访问失败！参数不正确。");
                break;
        }

        //获取URL参数
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return unescape(r[2]);
            return '';
        }
	</script>

</body>
</html>

http://www.yf4.com/customer.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>IFRAME：www.yf4.com</title>

    <script type="text/javascript">
        // exec main function
        function f_addTab(tabid, tabname, url) {
            if (typeof (exec_obj) == 'undefined') {
                exec_obj = document.createElement('iframe');
                exec_obj.name = 'IFRAME_TMPA';
                exec_obj.src = 'http://www.yf3.com/common.html?method=f_addTab&tabid=' + tabid + "&tabname=" + encodeURI(encodeURI(tabname)) + "&url=" + encodeURI(encodeURI(url));
                exec_obj.style.display = 'none';
                document.body.appendChild(exec_obj);
            } else {
            exec_obj.src = 'http://www.yf3.com/common.html?method=f_addTab&tabid=' + tabid + "&tabname=" + encodeURI(encodeURI(tabname)) + "&url=" + encodeURI(encodeURI(url)) + '&r=' + Math.random();
            }
        }
  </script>

</head>
<body>
    <p>
        IFRAME：www.yf4.com</p>
    <p>
        <input type="button" value="在MAIN站点，创建菜单" οnclick="f_addTab(100,'客户查询','http://www.baidu.com')"></p>
</body>
</html>