0
点赞
收藏
分享

微信扫一扫

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


​​源码下载​​

功能说明: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中创建菜单

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


​​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>
​


相关测试配置:

1、目录C:\Windows\System32\drivers\etc下,打开hosts文件,最后追加内容(192.168.1.122本机ip):
192.168.1.122    www.yf3.com
192.168.1.122    www.yf4.com

发布IIS
WEB_IFrameA站点:路径 目录/iframe/a/    域名192.168.1.122 www.yf3.com
WEB_IFrameB站点:路径 目录/iframe/b/    域名192.168.1.122 www.yf4.com

查看效果
WEB_IFrameA站点:http://www.yf3.com/admin.html
WEB_IFrameB站点:http://www.yf4.com/customer.html


举报

相关推荐

0 条评论