跨域情况下自适应大小的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加载两次。

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

你可能感兴趣的:(JavaScript,html,脚本,asp,firefox)