当前位置： 代码迷 >> Web前端 >> 跨域情况上自适应大小的iframe
  详细解决方案

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

热度：169   发布时间：2012-10-06 17:34:01.0
跨域情况下自适应大小的iframe

为了测试的方便，最好先设定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[i].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加载两次。

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.