iframe与主框架跨域相互访问实现方法
1.同域相互访问
假设a.html 与 b.html domain都是localhost （同域）
a.html中iframe 嵌入 b.html，name=myframe
a.html有js function fmain()
b.html有js function fiframe()
需要实现 a.html 调用 b.html 的 fiframe()，b.html 调用 a.html 的 fmain()
a.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 window </title>
<script type="text/javascript">
// main js function
function fmain(){
alert('main function execute success');
}
// exec iframe function
function exec_iframe(){
window.myframe.fiframe();
}
</script>
</head>
<body>
<p>a.html main</p>
<p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
<iframe src="b.html" name="myframe" width="500" height="100"></iframe>
</body>
</html>
b.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 window </title>
<script type="text/javascript">
// iframe js function
function fiframe(){
alert('iframe function execute success');
}
// exec main function
function exec_main(){
parent.fmain();
}
</script>
</head>
<body>
<p>b.html iframe</p>
<p><input type="button" value="exec main function" onclick="exec_main()"></p>
</body>
</html>
点击a.html 的 exec iframe function button，执行成功，弹出iframe function execute success。如下图
点击b.html 的 exec main function button，执行成功，弹出 main function execute success。如下图
2.跨域互相访问
假设 a.html domain是 localhost， b.html domain 是 127.0.0.1 （跨域）
这里使用 localhost 与 127.0.0.1 只是方便测试，localhost 与 127.0.0.1已经不同一个域，因此执行效果是一样的。
实际使用时换成 www.domaina.com 与 www.domainb.com 即可。
a.html中iframe 嵌入 b.html，name=myframe
a.html有js function fmain()
b.html有js function fiframe()
需要实现 a.html 调用 b.html 的 fiframe()，b.html 调用 a.html 的 fmain() （跨域调用）
如果使用上面同域的方法，浏览器判断a.html 与 b.html 不同域，会有错误提示。
uncaught securityerror: blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". protocols, domains, and ports must match.
实现原理：
因为浏览器为了安全，禁止了不同域访问。因此只要调用与执行的双方是同域则可以相互访问。
首先，a.html 如何调用b.html的 fiframe方法
1.在a.html 创建一个 iframe
2.iframe的页面放在 b.html 同域下，命名为execb.html
3.execb.html 里有调用b.html fiframe方法的js调用
<script type="text/javascript"> parent.window.myframe.fiframe(); // execute parent myframe fiframe function </script>
这样a.html 就能通过 execb.html 调用 b.html 的 fiframe 方法了。
同理，b.html 需要调用a.html fmain方法，需要在b.html 嵌入与a.html 同域的 execa.html
execa.html 里有调用 a.html fmain 方法的js 调用
<script type="text/javascript"> parent.parent.fmain(); // execute main function </script>
这样就能实现 a.html 与 b.html 跨域相互调用。
a.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 window </title>
<script type="text/javascript">
// main js function
function fmain(){
alert('main function execute success');
}
// exec iframe function
function exec_iframe(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createelement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://127.0.0.1/execb.html';
exec_obj.style.display = 'none';
document.body.appendchild(exec_obj);
}else{
exec_obj.src = 'http://127.0.0.1/execb.html?' + math.random();
}
}
</script>
</head>
<body>
<p>a.html main</p>
<p><input type="button" value="exec iframe function" onclick="exec_iframe()"></p>
<iframe src="http://127.0.0.1/b.html" name="myframe" width="500" height="100"></iframe>
</body>
</html>
b.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 window </title>
<script type="text/javascript">
// iframe js function
function fiframe(){
alert('iframe function execute success');
}
// exec main function
function exec_main(){
if(typeof(exec_obj)=='undefined'){
exec_obj = document.createelement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://localhost/execa.html';
exec_obj.style.display = 'none';
document.body.appendchild(exec_obj);
}else{
exec_obj.src = 'http://localhost/execa.html?' + math.random();
}
}
</script>
</head>
<body>
<p>b.html iframe</p>
<p><input type="button" value="exec main function" onclick="exec_main()"></p>
</body>
</html>
execa.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> exec main function </title> </head> <body> <script type="text/javascript"> parent.parent.fmain(); // execute main function </script> </body> </html>
execb.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> exec iframe function </title> </head> <body> <script type="text/javascript"> parent.window.myframe.fiframe(); // execute parent myframe fiframe function </script> </body> </html>
执行如下图：
源码下载地址：