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

jinyanhui2008

浏览: 319357 次
性别:
来自: 青岛

最近访客更多访客>>

wyl2317

chorar

xfworld

hiscaler

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

HTML JavaScript Firefox 脚本

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

分享到：

linux常用命令汇总 | sql 递归！！！

2011-02-15 20:01
浏览 1010
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论