跨域情况下自适应大小的iframe

cn-done · 发表于 2013-2-7 20:12:40

为了测试的方便，最好先设定host域名映射：

127.0.0.1 a.foo.com
127.0.0.1 b.foo.com
127.0.0.1 www.foo.com
127.0.0.1 www.bar.com

如果根域名相同，仅仅是子域名不同，则只要设定document.domain为根域名即可：

http://a.foo.com/main.html：

<html>
<head>
<title>main</title>
<script>
document.domain = "foo.com";
</script>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://b.foo.com/content.html"></iframe>
</body>
</html>

http://b.foo.com/content.html：

<html>
<head>
<title>content</title>
<script>
document.domain = "foo.com";
window.onload = function() {
parent.document.getElementById("content").width = document.body.scrollWidth;
parent.document.getElementById("content").height = document.body.scrollHeight;
}
</script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>

此时，浏览http://a.foo.com/main.html就能看到自适应大小的iframe效果了。

如果根域名不同，则需要通过代理页面的location.href传递变量：

http://www.foo.com/main.html：

<html>
<head>
<title>main</title>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://www.bar.com/content.html"></iframe>
</body>
</html>

http://www.bar.com/content.html：

<html>
<head>
<title>content</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script type="text/javascript" src="http://www.bar.com/iframe.js"></script>
</body>
</html>

http://www.foo.com/proxy.html：

<html>
<head>
<title>proxy</title>
</head>
<body>
<script>
var query = location.search.substring(1).split("&");
for (var i = 0; i < query.length; i++) {
var param = query.split("=");
switch (param[0]) {
case "width":
parent.parent.document.getElementById("content").width = param[1];
break;
case "height":
parent.parent.document.getElementById("content").height = param[1];
break;
}
}
</script>
</body>
</html>

http://www.bar.com/iframe.js：

window.onload = function() {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://www.foo.com/proxy.html?width=" + document.body.scrollWidth + "&" + "height=" + document.body.scrollHeight;
document.getElementsByTagName("body")[0].appendChild(iframe);
}

此时，浏览http://www.foo.com/main.html就能看到自适应大小的iframe效果了，其原理是因为子页面content.html把大小通过location.href的方式设定到代理页面proxy.html上面，而代理页面proxy.html和原页面main.html处在同一域名下，所以不存在javascript的跨域安全限制。需要注意的是，代理页面proxy.html的引入使用的是javascript脚本动态生成的方式。网上很多例子里在引入代理页面时，是采用的html硬编码iframe的方式，然后用javascript设定src，这样的方式是不好的，在firefox下，会让代理页面proxy.html加载两次。

参考链接：http://www.w3schools.com/TAGS/tag_iframe.asp

		自动登录	找回密码
密码			立即注册