Html中iframe跨域调用js函数解决办法
页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中的js函数,由于两个页面不在一个域中,会提示没权限。如何解决该问题呢,请看下面示例代码。
a.html内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript">
function test(){
alert(123);
}
</script>
</head>
<body>
主页面 <br>
<iframe src="http://www.b.com/b.html" width="300" height="300"></iframe>
</body>
</html>
b.html内容:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B</title>
<script type="text/javascript">
function t(){
var iframeTag = document.getElementById('frameC');
iframeTag.src = 'http://www.a.html/c.html?time='+new Date();
};
</script>
</head>
<body>
被嵌入页面,与主页面不在同一域名下。
<button οnclick="t();">Test</button>
<iframe id="frameC" style="display: none;"></iframe>
</body>
</html>
c.html内容 (c.html与a.html在同一个域下):
<script type="text/javascript">
top.test();
</script>
通过代码可以很明显的看出,c.html起着关键作用,在两个域之间做为中转站。通过此方法,可以轻松解决iframe下跨域调用js函数的问题。
a.html内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript">
function test(){
alert(123);
}
</script>
</head>
<body>
主页面 <br>
<iframe src="http://www.b.com/b.html" width="300" height="300"></iframe>
</body>
</html>
b.html内容:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B</title>
<script type="text/javascript">
function t(){
var iframeTag = document.getElementById('frameC');
iframeTag.src = 'http://www.a.html/c.html?time='+new Date();
};
</script>
</head>
<body>
被嵌入页面,与主页面不在同一域名下。
<button οnclick="t();">Test</button>
<iframe id="frameC" style="display: none;"></iframe>
</body>
</html>
c.html内容 (c.html与a.html在同一个域下):
<script type="text/javascript">
top.test();
</script>
通过代码可以很明显的看出,c.html起着关键作用,在两个域之间做为中转站。通过此方法,可以轻松解决iframe下跨域调用js函数的问题。